缩略图的切换器不起作用

Question

我需要帮助修复我的Switcher缩略图。我不明白为什么代码不起作用。代码为html和jQuery。

$(function(){
    $(".current-photo-product img:eq(0)").nextAll().hide();

    $(".choice-photo ul li img").click(function(e){
        var index = $(this).index();
        $(".current-photo-product img").eq(index).show().siblings().hide();
    });
});

<div class="product-preview">
        <div class="current-photo-product">
            <img src="img/product-photo1.png" alt="photo1">
            <img src="img/product-photo2.png" alt="photo2">
            <img src="img/product-photo3.png" alt="photo3">
            <img src="img/product-photo4.png" alt="photo4">
        </div>
        <div class="choice-photo">
            <ul>
                <li><img src="img/product-photo1.png" alt="photo1"></li>
                <li><img src="img/product-photo2.png" alt="photo2"></li>
                <li><img src="img/product-photo3.png" alt="photo3"></li>
                <li><img src="img/product-photo4.png" alt="photo4"></li>
            </ul>
        </div>
</div>

Answer 1

我相信以下内容对您有用

$(function(){
    $(".current-photo-product img:eq(0)").nextAll().hide();

    $(".choice-photo ul li img").click(function(e){
        var index = $(this).parent().index();
        $(".current-photo-product img").eq(index).show().siblings().hide();
    });
});

你需要在img标签上面的li上做索引。