配列ワークのループ内で.click関数の内部にリンクを張るには？

Question

私がしようとしているのは、trがクリックされたときに、コードの変数を含むGoogleマップのアドレスである新しいタブをアドレスで開きます。

<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を、：：

私は、このHTML持っ

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

これの結果は、私がクリックしても、最後のアドレスにいつも移動します。しかし、私はCSSでdisplay: blockとともに、代わりにクリック機能の次のコードを、置く、それは動作しますが、リンクをクリックした場合にのみ、しかし、TRをクリックしたときに私はそれが仕事をしたいとき：

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

PS：この最後のコードでは新しいタブは開かないが、正しくリダイレ​​クトされていることはわかっている。

Answer 1

私はあなたがしたいことをまったく追うことができません。これにより、<tr>がクリックされたときに、最初の子<span class="place-address">...</span>のテキストが<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()を使用してイベント・委任アプローチを使用することを検討してください。

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

<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>