Meine Anker-Tags funktionieren nicht.

Question

Das Problem ist, wie es im Titel sagt, klicken Sie auf ein Bild mit einem Anker-Tag umwickelt funktioniert nicht. Hier

ist ein Beispiel auf die Netzlistenpunkt:

<li class="grid-list-item"> 
      <h3 class="grid-trail-name">Marshall Canyon</h3><span class="grid-loc">Mt Baldy, California</span> 
      <div class="grid-overlay"> 
       <span class="grid-close">close</span> 
       <div class="grid-trail"> 
        <div class="open"> 
         <div class="info-flex info"> 
          <div class="info-sum info-flex-child"> 
           <h3 class="info-sum-header">Marshall Canyon...</h3> 
           <p class="info-sum-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque imperdiet massa sed augue posuere aliquet. Sed ac eros convallis, porttitor tellus in, blandit lacus. Suspendisse mollis quis turpis ac tempor. Pellentesque imperdiet massa sed augue posuere aliquet. Sed ac eros convallis, porttitor tellus in, blandit lacus. Suspendisse mollis quis turpis ac tempor. </p> 
          </div> 
          <div class="info-map info-flex-child"> 
           <a href="http://www.ramblr.com/web/mymap/trip/81548/154499" target="_blank" ><img src="http://www.ramblr.com/media/photo/map/20150714/0000154499_big_english.jpg?q=1461036407851" data-item="map_img" data-src="http://www.ramblr.com/media/photo/map/20150720/0000158962_big_english.jpg" class="map"> </a> 
          </div> 
          <div class="info-graph info-flex-child"> 
           <a href="http://www.ramblr.com/web/mymap/trip/81548/154499" target="_blank" ><img src="http://www.ramblr.com/media/photo/chart/20150714/0000154499_1_english.jpg?q=1461036467654" data-item="chart_img" data-src="http://www.ramblr.com/media/photo/chart/20150720/0000158962_1_english.jpg" class="graph"></a> 
          </div> 
          <div class="info-pic-section info-flex-child"> 
           <img src="images/marshall.jpg" alt="" class="info-pic"> 
          </div> 
         </div><!-- GRID INFO --> 
        </div><!-- OPEN --> 
       </div><!-- GRID TRAIL --> 
      </div><!-- GRID OVERLAY --> 
     </li><!-- GRID ITEM --> 

Raster-Overlay bleibt verborgen, bis der Benutzer auf das Netz Element klickt. Nach dem Klicken wird der Infobereich angezeigt. Innerhalb des Infobereichs befinden sich eine Karte und ein Diagramm, die nach dem Anklicken ein neues Anker-Tag öffnen sollen.

Meine Vermutung ist, dass das Skript, das ich verwendet habe, um diesen Effekt zu erzielen, das Problem verursacht boxgrid.js. Finden Sie die Github Repo here und die Website ist auf Surge here.

Answer 1

Das Problem liegt darin, wo der <div class="grid-overlay"> Inhalt im DOM befindet. Momentan gibt es 12 von ihnen, 1 in jedem Listenelement. Sie benötigen diese Overlays, um außerhalb der Listenelemente zu leben.

Überprüfen Sie die folgenden gif. up

ich auf einer der Ausgangslistenelemente und die Auflage kommt. Wie üblich funktioniert das Klicken auf den Kartenanker nicht. Dann ziehe ich das <div class="grid-overlay"> DOM außerhalb seines Listenelements und lasse es direkt vor </body> fallen. Die Stile sind jetzt ein wenig durcheinander (benötigt eine Hintergrundfarbe), aber der Punkt ist, dass der Map-Anker-Link jetzt funktioniert.

Eine Lösung wäre, alle <div class="grid-overlay"> Elemente kurz vor </body> zu verschieben und jeweils ein Datenattribut hinzuzufügen und es dem Wanderziel zuzuordnen. Zum Beispiel:

<div class="grid-overlay" data-belongs-to="Potato Mountain">

Dann könnten Sie dieses Ziel mit der geklickt Listeneintrag zuordnen:

<li class="grid-list-item" data-location="Potato Mountain">

An dieser Stelle Sie zu Chaos mit dem original script etwas haben würde. Sie würden ändern möchten:

$overlay = $item.children('div.grid-overlay')

weil die <div class="grid-overlay"> Elemente nicht mehr als Kinder wohnen innerhalb jedes $item würde.

Viel Glück!