JS新手：單擊按鈕后如何執行部分HTML

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的“過濾器”功能中添加了幾行（感謝@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. 在大圖上設置正確的文件名

這應該夠了吧。 祝好運！