Javascript JS新手：点击按钮后如何执行部分HTML

我对JS和jQuery还不太熟悉，我一直在坚持这一点

我正在做一个电子商务，我有一个页面显示产品的细节。 我有一个缩略图旋转木马。如果单击缩略图，则主图像将被选定图像替换

然后，在页面的另一部分，我有一些小的颜色框：如果您选择其中一个（例如红色），缩略图列表将被过滤并仅显示红色缩略图。这是通过自定义脚本完成的，该脚本将颜色框的类值与缩略图的类值相匹配

我所挣扎的是试图显示所选颜色的更大图像。 正确的用例是：

用户打开产品页面

大图像查看器显示大图像，例如 红色版本（对应于中的第一个缩略图） 转盘）-这没问题

转盘显示5个缩略图，3个对应于产品的红色版本，2个对应于黄色版本-这没问题

用户播放旋转木马：单击缩略图会触发 相应的大图像-这是确定的

用户决定按颜色过滤，并单击黄色小颜色框-这是确定的

Carousel将被过滤并仅显示产品黄色版本的缩略图-这是正常的

在5的同时。与筛选列表中的第一个缩略图相对应的大图像 应该被触发，应该在大图像查看器中弹出-这就是我正在努力解决的问题

以下是“大图像查看器+旋转木马”的代码：

<div id="product">
    <!-- BIG IMAGE VIEWER - The first that gets loaded is the first big image corresponding to  the first thumbnail --> 
    <div id="productimg"><a href="full_size_red_01.jpg" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false"><img src="big-red_01.jpg" alt="" title="M1" /></a></div>
     <!-- END BIG IMAGE VIEWER --> 

    <div id="productdet">
    <!-- THUMBNAILS CAROUSEL -->
      <ul id="mycarousel" class="jcarousel-skin-tango">
      <li><a href='full_size_red_01.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'big_red_01.jpg' " title='M1'><img src="thumb_red_01.jpg" alt="M1" class="Rosso/Red" /></a></li>
      <li><a href='full_size_red_02.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'big_red_02.jpg' " title='M1'><img src="thumb_red_02.jpg" alt="M1" class="Rosso/Red" /></a></li>
      <li><a href='full_size_red_03.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'big_red_03.jpg' " title='M1'><img src="thumb_red_03.jpg" alt="M1" class="Rosso/Red" /></a></li>
      <li><a href='full_size_yellow_01.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'big_yellow_01.jpg' " title='M1'><img src="thumb_yellow_01.jpg" alt="M1" class="Rosso/Red" /></a></li>
      <li><a href='full_size_yellow_02.jpg' class='cloud-zoom-gallery' rel="useZoom: 'zoom1', smallImage: 'big_yellow_02.jpg' " title='M1'><img src="thumb_yellow_02.jpg" alt="M1" class="Rosso/Red" /></a></li>

      </ul>
    <!-- END THUMBNAILS CAROUSEL -->
    </div>

<div class="controls color">
    <label class="Rosso/Red"><input type="radio" name="modifiers[1]" value="1" /> Rosso/Red</label>                             
    <label class="Giallo/Yellow"><input type="radio" name="modifiers[1]" value="2" /> Giallo/Yellow</label>                             
    </div>
</div>

---

如果我正确地阅读了您的问题，我认为您需要做的是在

过滤器

函数退出之前添加一些代码，这基本上可以做到：

在图像转盘中查找第一个可见图像（提示：使用：可见选择器）

从中提取文件名

在大图像上设置正确的文件名

---

这应该能奏效。祝你好运

我们应该想象一下剧本是什么吗？是的，很抱歉。我刚刚用更多的代码更新了我的问题。谢谢，我设法解决了！！！这正是做这件事的最佳方式。这很容易！我用解决方案@vrutbergGreat！编辑了这篇文章：）如果你觉得我的答案对你有帮助，你能把它标对吗？

var select = {
wrapper: null,
controls: null,
resetBtn: $('<p id="reset">Vedi tutti i colori</p>'),
images: null,
carousel: null,
carouselBtns: null,
isClickable: false,
init: function(){
    this.carousel = $('#mycarousel');
    this.wrapper = $('#productdet');
    this.controls = $('div.controls');
    this.images = this.wrapper.find('img');

},
filter: function(){
    this.controls.on('click', 'input[type="radio"]', function(){
        select.carouselBtns = select.wrapper.find('div.jcarousel-clip').nextAll('div');
        var filterName = $(this).closest('label').attr('class').split('/')[0],
            filteredImg = select.wrapper.find('img[class*="'+filterName+'"]'),
            itemLen = select.wrapper.find('li').length;

        if( filteredImg.length ){
            select.controls.find('label').removeClass('on');
            $(this).closest('label').addClass('on');

            select.images.closest('li').hide();

            select.wrapper.find('div.jcarousel-clip').nextAll('div.jcarousel-prev').click();
            filteredImg.closest('li').show(0, function(){
                if ( filteredImg.length < 5 ) {//itemLen

                    select.carouselBtns.hide();

                }
            });
        }

        select.isClickable = true;
        select.preventItemAdding();
    });
},
preventItemAdding: function(){
    var add = $('#add');

    if ( !select.isClickable ) {
        add.addClass('off');
    }else{
        add.removeClass('off');
    }
},

resetAll: function(){
    select.resetBtn.click(function(){
        select.controls.find('label').removeClass('on');
        select.images.closest('li').show();
        select.carousel.jcarousel('reload');

        select.carouselBtns.show();
        select.isClickable = false;
        select.preventItemAdding();
    });
}
};

var imageUrl = $(".jcarousel-item:visible:eq(0) .cloud-zoom-gallery").attr("rel").substr(31).slice(0, -2);
$("#productimg #wrap #zoom1 img").attr("src", imageUrl);