Associating Liste Artikel mit Google Map Marker

Question

Wenn Sie zum ersten Mal an der Geige aussehen:

https://jsfiddle.net/80m1psmy/7/

Es wird leichter zu verstehen sein.

Grundsätzlich funktionieren die Li's in der ersten Registerkarte "Bars" gut, wenn Sie auf die Li klicken, zeigt der zugehörige Marker seine Infos an. Dies funktioniert jedoch nicht für die anderen Registerkarten?

Ich möchte die gleiche Funktionalität für alle Registerkarten haben. Hier

ist der zugehörige Code:

$('#bars-list li').each(function(i, e) { 
    $(e).click(function(i) { 
     return function(e) { 
      google.maps.event.trigger(gmarkers[i], 'click'); 
     } 
    }(i)); 
}); 

Ich glaube, ich brauche eine $(this) hinzufügen, so dass es nicht spezifisch für eine bestimmte Liste ist, aber ich bin nicht sicher, wie dies zu implementieren?

Vielen Dank im Voraus!

Answer 1

Das Problem ist Ihr Selektor #bars-list li.

Auch wenn Sie den gleichen Code für die anderen Registerkarten hinzufügen, wird es nicht wie erwartet funktionieren, da der Index (i) auf den Elementen der aktuellen Registerkarte basiert, nicht auf allen Elementen, so wenn Sie z. Das erste Element einer Registerkarte wird den Klick immer für die erste Markierung auslösen (nicht für die erste Markierung der zugehörigen Kategorie).

Sie müssen einen Selektor verwenden, der alle Elemente enthält, z. .lists li

https://jsfiddle.net/6mqooqd9/