Wie wird eine Verknüpfung innerhalb einer .click-Funktion in einer Schleife für ein Array erstellt?

Question

Ich versuche, wenn der tr geklickt wird, einen neuen Tab mit einer Adresse zu öffnen, das ist eine Google Maps-Adresse mit den Variablen aus dem Code dazwischen.

Ich habe dieses 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> 

Und dieses JavaScript in 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 

Ich will nicht die Link-Karten erscheinen, deshalb sind sie leer und mit einem sind display: none in der CSS.

Das Ergebnis von all dem ist, dass, egal, welcher der tr's ich klicke, es mich immer zur Adresse des letzten bringen wird. Aber wenn ich den folgenden Code anstelle der Klick-Funktion setzen, zusammen mit display: block in der CSS, es funktioniert, aber nur, wenn Sie auf den Link, aber ich will es arbeiten, wenn das tr klicken:

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

PS: Ich weiß, dass dieser letzte Code keine neue Registerkarte öffnet, aber es leitet richtig um.

Answer 1

Ich kann nicht ganz folgen, was Sie versuchen zu tun. Dies protokolliert den Text, der in dem ersten Kind <span class="place-address">...</span> von <tr> enthalten ist, wenn auf <tr> geklickt wird. Von hier aus müssen Sie einen Google Maps-Link erstellen und window.open(...) aufrufen, um einen neuen Tab zu öffnen.

(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

Statt einen Hörer jede Zeile der Tabelle zuzuweisen, sollten Sie mit .on() ein Event-Delegation Ansatz.

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