JS: Verbindung in Daten-href funktioniert nicht im Karussell

Question

Ich habe ein Karussell: JS Fiddle. Ich versuche, herauszufinden, wie jedes Bild zu verknüpfen, die auf einer eigenen Seite als das Hauptbild angezeigt wird, so dass:

• , wenn ich auf das Bild des Wagens klicken - es geht um wagon.com,
• , wenn ich auf dem Bild des Erbstück Fotos klicken - es geht heirloom.com,

• , wenn ich auf dem Bild der wolligen klicken - es geht um woolly.com usw.

   <li> 
          <a href="https://upload.wikimedia.org/wikipedia/commons/e/e9/Baker's-van-r.jpg"></a> 
          <a data-href="www.wagon.com"></a> 
          <div class="block"> 
           <h2>Wagon wins again</h2> 
          </div> 
      </li> 
  
  
      <li> 
          <a href="https://s-media-cache-ak0.pinimg.com/736x/00/60/ff/0060ff20d110050c0e350c55f7c7f3be.jpg"></a> 
          <a data-href="www.heirloom.com"></a> 
          <div class="block"> 
           <h2>Heirloom Scareloom</h2>                 
          </div> 
      </li> 
  
      <li> 
          <a href="https://upload.wikimedia.org/wikipedia/commons/7/79/Mammuthus_trogontherii122DB.jpg"></a> 
          <a data-href="www.woollies.com"></a> 
          <div class="block"> 
           <h2>The Original Wollies</h2><br>                
          </div> 
      </li> 
  

In der JQuery habe ich `data-href`` verwendet, um den Link für jedes Bild zuzuweisen.

var imgAlt = $(this).find('img').attr("alt"); // Get Alt Tag of Image 
     var imgTitle = $(this).find('a').attr("href"); // Get Main Image URL 
    var imgLink = $(this).find('a').attr("data-href"); // Get Main Image URL 
     var imgDesc = $(this).find('.block').html(); // Get HTML of block 
     var imgDescHeight = $(".main_image").find('.block').height(); // Calculate height of block 

Die Links gehen jedoch nicht auf die angegebene Seite. Würde jede mögliche Richtung schätzen, wie man damit umgeht. Wo gehe ich falsch?

Answer 1

ok - versuchen Sie das - nicht sicher, ob es die Lösung ist: aber es scheint in der Geige zu arbeiten. Ich würde Ihnen wahrscheinlich raten, die Struktur des Hauptbildbereichs zu überdenken (es scheint ein bisschen chaotisch und verwirrend), aber ich denke, das Problem, dass Sie auf das falsche "a" beziehen, wenn Sie den imgLink einstellen. Es ist die zweite (oder letzte), die die Daten href nicht die erste hat.

Versuchen Swapping, dass mit diesem:

var imgLink = $(nextImage).find('a:last').attr("data-href"); // Get Main Image URL 

, die jetzt ein Wechsel href auf die Bilder, wie sie Zyklus durch die Sequenz hinzuzufügen scheint. auch - versuche, den vollen (absoluten) Pfad für die hrefs zu verwenden - ich habe einfach "http://www.heirloom.com/" eingefügt und ein Klick auf das Bild brachte mich dort aus der Geigenseite.

Answer 2

prüfen diese,

var imgLink = $(this).find('a:last').attr("data-href"); // Get Main Image URL 

https://jsfiddle.net/qftcjcbp/10/