javascript - 如何在数组工作循环内的 .click 函数内建立链接？

Question

我试图在单击 tr 时打开一个包含地址的新选项卡，该地址是 Google 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>

还有这个 JavaScript，在 jQuery 中:

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

我不希望链接映射出现，这就是为什么它们是空的并且 CSS 中带有 display: none 的原因。

所有这一切的结果是，无论我点击哪一个tr，它总是会带我到最后一个tr的地址。但是，当我将以下代码而不是 click 函数与 CSS 中的 display: block 一起放置时，它会起作用，但仅在单击链接时起作用，但我希望它在单击 tr 时起作用:

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

PS:我知道最后一个代码不会打开新选项卡，但它正确重定向。

Answer 1

我不太明白你想要做什么。这将记录第一个子项 <span class="place-address">...</span> 中包含的文本。的<tr>当 <tr>被点击。从这里，您需要构建一个 Google map 链接并调用 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(...)
    });
  });
})();

<table>
  <tbody>
    <tr>
      <td>
        <span class="place-address">A Street, 608, City</span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="place-address">A Street, 998, City</span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="place-address">A Street, 226, City</span>
      </td>
    </tr>  
  </tbody>
</table>