Question

我正在结账时创建产品页面。页面有样本，点击时需要使用新颜色更新主图像和相应的缩略图。您可以在此处查看页面：http://www.briansugden.com/ai/tron.html un / pw is ai / ai。

这是我的代码：

<div id="productGallery">

    <div id="tronGallery_1" class="tab">
        <div class="productGalleryMainImg">
            <img id="photoLarge" src="images/tron/tron_satin_1.jpg" width="540" height="415" /></div>

        <div id="productThumbs">

            <a href="images/tron/tron_satin_1.jpg"><img id="thumb01" src="images/tron/thumb.jpg" width="100" height="77" class="thumb active" /></a>

            <a href="images/tron/tron_satin_2.jpg"><img id="thumb02" src="images/tron/thumb2.jpg" width="100" height="77" class="thumb" /></a>

            <a href="images/tron/tron_satin_3.jpg"><img id="thumb03" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" /></a>

            <a href="images/tron/tron_satin_4.jpg"><img id="thumb04" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" /></a>

        </div>
    </div>


    <div id="tronGallery_2" class="tab">
        <div class="productGalleryMainImg">
            <img id="photoLarge" src="images/tron/tron_satin_1.jpg" width="540" height="415" /></div>

        <div id="productThumbs">

            <a href="images/tron/tron_satin_1.jpg"><img id="thumb01" src="images/tron/thumb.jpg" width="100" height="77" class="thumb active" /></a>

            <a href="images/tron/tron_satin_2.jpg"><img id="thumb02" src="images/tron/thumb2.jpg" width="100" height="77" class="thumb" /></a>

            <a href="images/tron/tron_satin_3.jpg"><img id="thumb03" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" /></a>

            <a href="images/tron/tron_satin_4.jpg"><img id="thumb04" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" /></a>

        </div>
    </div>


    <div id="tronGallery_3" class="tab">
        <div class="productGalleryMainImg">
            <img id="photoLarge" src="images/tron/tron_satin_1.jpg" width="540" height="415" /></div>

        <div id="productThumbs">

            <a href="images/tron/tron_satin_1.jpg"><img id="thumb01" src="images/tron/thumb.jpg" width="100" height="77" class="thumb active" /></a>

            <a href="images/tron/tron_satin_2.jpg"><img id="thumb02" src="images/tron/thumb2.jpg" width="100" height="77" class="thumb" /></a>

            <a href="images/tron/tron_satin_3.jpg"><img id="thumb03" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" /></a>

            <a href="images/tron/tron_satin_4.jpg"><img id="thumb04" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" /></a>

        </div>
    </div>


    <div id="tronGallery_4" class="tab">
        <div class="productGalleryMainImg">
            <img id="photoLarge" src="images/tron/tron_satin_1.jpg" width="540" height="415" /></div>

        <div id="productThumbs">

            <a href="images/tron/tron_satin_1.jpg"><img id="thumb01" src="images/tron/thumb.jpg" width="100" height="77" class="thumb active" /></a>

            <a href="images/tron/tron_satin_2.jpg"><img id="thumb02" src="images/tron/thumb2.jpg" width="100" height="77" class="thumb" /></a>

            <a href="images/tron/tron_satin_3.jpg"><img id="thumb03" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" /></a>

            <a href="images/tron/tron_satin_4.jpg"><img id="thumb04" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" /></a>

        </div>
    </div>


</div>

主要拇指的javascript（更改主图像的视图）以及样本（将整个图库更改为新颜色）：

 $(function(evt) {
    $("a:has(img.thumb)").click(function() {
        var largePath = $(this).attr("href");

        $("#photoLarge").attr({ src: largePath });
        return false;

    });

    $("#productThumbs > a > img").click(function(e){
      e.preventDefault();
        $("#productThumbs > a > img").addClass("active").not(this).removeClass("active");
      });

});




$(document).ready(function () {

            $("#tronGallery_2").hide();
            $("#tronGallery_3").hide();
            $("#tronGallery_4").hide();

            var clickHandler = function (link) {
                 $(".tab").hide();
                 $("#tronGallery_" + link.data.id).show();
                 $(".active").removeClass("active");
                 $(this).attr("class","active");
           }

           $(".swatch1").bind("click", {id:"1"} ,clickHandler);
           $(".swatch2").bind("click", {id:"2"} ,clickHandler);
           $(".swatch3").bind("click", {id:"3"} ,clickHandler);
           $(".swatch4").bind("click", {id:"4"} ,clickHandler);

        })
        </script>

所以div没有正确地切换出来，一旦你对样片进行了整理，拇指就不能正常工作了。我想我知道问题是什么，但我不知道如何解决它。我假设一旦我通过单击一个样本切换出div，它仍然瞄准隐藏的div而不是可见的div。我该如何解决这个问题。

非常感谢任何帮助！

Answer 1

首先：那些是一些昂贵的鞋子！

第二：你有很多重复的ID值。例如：photoLarge，productThumbs，thumb01，thumb02，thumb03，thumb04。使每个人都独一无二，你可能会得到更好的结果。

第三：在行$(this).attr("class","active");之后你想要另一行来使第一个缩略图处于活动状态，因为你已经删除了它的活动类。您的HTML会将第一个缩略图标记为活动，但会在显示之前将其删除。

使用一组缩略图旋转通过众多画廊

1 个答案: