javascript - JS新手: how to execute part of the HTML after clicking on a button

Question

我对 JS 和 jQuery 相当陌生，而且我一直坚持这一点。

我正在做电子商务，我有一个显示产品详细信息的页面。 我有一个缩略图轮播。如果单击缩略图，主图像将替换为所选图像。

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

我正在努力尝试显示所选颜色的更大图像。 正确的用例是:

1. 用户打开产品页面
2. 大图像查看器显示大图像，例如的照片 红色版本(对应于第一个缩略图 轮播) - 这没问题
3. 轮播显示 5 个缩略图，其中 3 个对应产品的红色版本，2 个对应黄色版本 - 这样就可以了
4. 用户玩轮播:点击缩略图会触发 相应的大图 - 这样就可以了
5. 用户决定按颜色过滤并点击黄色小颜色框 - 这样就可以了
6. 轮播会被过滤并仅显示产品的黄色版本的缩略图 - 这没问题
7. 与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>

缩略图+大图查看器逻辑是通过jcarousel管理的。

管理缩略图过滤的自定义js是这样的:

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();
    });
}
};

任何帮助将不胜感激。 谢谢!!

解决方案

我在 JS 的“filter”函数中添加了几行(感谢@vrutberg):

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

Answer 1

如果我正确地阅读了你的问题，我认为你需要做的是在 filter 函数退出之前添加一些代码，基本上是这样的:

1. 查找图像轮播中的第一个可见图像(提示:使用 :visible 选择器 http://api.jquery.com/visible-selector/ )
2. 从中提取文件名
3. 在大图像上设置正确的文件名

这应该可以解决问题。祝你好运!