jquery 如何在数组的循环中使用.click函数中的链接？

9ceoxa92 于 2023-08-04 发布在 jQuery

关注(0)|答案(2)|浏览(118)

我试着，当tr被点击时，打开一个新的标签，它有一个地址，这是一个谷歌Map的地址，中间有代码中的变量。
我有这个HTML：

<tr>
    <td>
    <span class="place-address">A Street, 608, City</span>
    <a class="link-maps"></a>
    </td>
</tr>
<tr>
    <td>
    <span class="place-address">A Street, 998, City</span>
    <a class="link-maps"></a>
    </td>
</tr>
<tr>
    <td>
    <span class="place-address">A Street, 226, City</span>
    <a class="link-maps"></a>
    </td>
</tr>

字符串
在jQuery中的JavaScript：

var addressesArray = [];
var linkMapsArray = [];

var placeAddress = $(".place-address").each(function() {

    var addresses = $(this).text();
    addressesArray.push(addresses);
});

var linkMaps = $(".link-maps").each(function() {

    var links = $(this);
    linkMapsArray.push(links);
});

var placesAddresses = addressesArray;

$(function() {

    getLocation();
});

function getLocation() {

    if (navigator.geolocation) {
        
        navigator.geolocation.getCurrentPosition(openMaps, showError);
    } else {

        alert("Your navigator doesn't support geolocation.");
    }
}

function openMaps(position) {

    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    for(j = 0; j < placesAddresses.length; j++) {

        var address = placesAddresses[j];
        linkMapsArray[j].closest("tr").click(function() {

            window.open("https://www.google.com/maps/dir/" + latitude + "," + longitude + "/" + address + "/")
        });
    }
}

//omitted showError function

型
我不希望链接Map出现，这就是为什么它们是空的，并且在CSS中有一个display: none。
所有这一切的结果是，无论我点击哪一个tr，它总是会把我带到最后一个的地址。但是，当我把下面的代码代替click函数，与display: block沿着放在CSS中时，它可以工作，但只有在单击链接时，但我希望它在单击tr时工作：

linkMapsArray[j].text(address);
linkMapsArray[j].attr("href", "https://www.google.com/maps/dir/" + latitude + "," + longitude + "/" + address + "/");

型
PS：我知道这最后的代码不打开一个新的标签，但它是正确的重定向。

jquery

来源：https://stackoverflow.com/questions/45201539/how-to-make-a-link-inside-a-click-function-inside-a-loop-for-an-array-work

2条答案

按热度按时间

kzmpq1sx1#

我不太明白你想干什么。这将记录单击<tr>时<tr>的第一个子<span class="place-address">...</span>中包含的文本。从这里开始，您需要构造一个GoogleMaps链接并调用window.open(...)来打开一个新选项卡。

(function(){
  // get all <tr> tags
  document.querySelectorAll('tr').forEach(function (tr) {
    // listen for click events on each <tr>
    tr.addEventListener('click', function (event) {
      // log the text of the .place-address span within the clicked <tr>
      console.log(tr.querySelector('.place-address').innerText);
      // TODO open a new tab here window.open(...)
    });
  });
})();

个字符

赞(0）回复(0）举报 2023-08-04

ngynwnxp2#

考虑使用.on()的事件委托方法，而不是为每个表行分配一个侦听器。

(function() {
  getLocation();

  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(handleRowClicks, showError);
    } else {
      alert("Your navigator doesn't support geolocation.");
    }
  }

  function showError() {
    // omitted
  }

  function handleRowClicks(currentPosition) {
    $("#places").on("click", "tr", function() {
      openGoogleMaps(userPosition);
    });
  }

  function openGoogleMaps(currentPosition) {
    let address = $(this).find(".place-address").text();
    let latitude = currentPosition.coords.latitude;
    let longitude = currentPosition.coords.longitude;
    let url = "https://www.google.com/maps/dir/" + latitude + "," + longitude + "/" + address + "/";

    console.log(url);
    // window.open(url);
  }
})();

个字符

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 如何在数组的循环中使用.click函数中的链接？

2条答案

相关问题

热门标签

最新问答