Question

我有一个旋转木马：JS Fiddle。我试图找出如何将显示为主图像的每个图像链接到其自己的页面，例如：

当我点击旅行车的图像时 - 它会转到wagon.com，
当我点击传家宝照片的图像时 - 它会进入 heirloom.com，

当我点击羊毛的图像时 - 它会转到woolly.com等。

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

在JQuery中，我使用`data-href``为每个图像分配链接。

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

但是链接不会转到指定的页面。将不胜感激任何有关如何处理这个问题的方向。我哪里错了？

Answer 1

好吧 - 尝试这个 - 不确定它是否是解决方案：但它似乎在小提琴中起作用。我可能会建议你重新考虑一下主图像部分的结构（看起来有点混乱和混乱），但我认为你指的是错误的问题＆＃34; a＆＃34;设置imgLink时。它是第二个（或最后一个）数据href不是第一个。

尝试用这个交换：

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

现在似乎在图像循环显示时会为图像添加更改的href。另外 - 尝试使用hrefs的完整（绝对路径） - 我只是放入＆＃34; http://www.heirloom.com/＆＃34;然后点击图片就把我带到了小提琴页面。

Answer 2

检查一下，

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

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

JS：data-href中指定的链接在carousel中不起作用

2 个答案: