Question

我正在尝试，当点击tr时，打开一个带有地址的新标签，这是一个Google地址，其中包含代码中的变量。

我有这个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。

所有这一切的结果是，无论我点击哪一个，它总是会把我带到最后一个地址。但是，当我将以下代码而不是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地图链接并致电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>

Answer 2

不要为每个表行分配监听器，而应考虑使用.on()的事件委派方法。

＆＃13;

(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);
  }
})();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="places">
  <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>
</table>

＆＃13;

如何在循环内的.click函数内建立链接以进行数组工作？

2 个答案: