bbs-go-site

我要实现的目的是避免在显示图像时重复代码（单击缩略图时，包含要更改的较大图片的div，类似于启动选项卡。）

let $showcaseImage = $('.product-image-wrapper');
    $showcaseImage.slice(1).hide();
    $thumbnailImage = $('.product-slider');

    $thumbnailImage.click(function() {

        let $classToggler = $('#' + this.id).addClass('active');
        $thumbnailImage.not($classToggler).removeClass('active');

        let $target = $('#' + this.id + 'show').fadeIn();
        $showcaseImage.not($target).hide();
    });

这是用于定位缩略图并将其显示在大容器中的代码。

html代码：缩略图部分

<div class="product-slider-gallery">
     <div class="product-slider active mr-20">
         <img class="img-products" src="assets/images/cupboards/placard-81/placard81_1-thumb.jpg" alt="thumb-image-1">
     </div>
     <div class="product-slider mr-20">
         <img class="img-products" src="assets/images/cupboards/placard-81/placard81_2-thumb.jpg" alt="thumb-image-2">
     </div>
     <div class="product-slider mr-20">
         <img class="img-products" src="assets/images/cupboards/placard-81/placard81_3-thumb.jpg" alt="thumb-image-3">
     </div>
     <div class="product-slider mr-20">
         <img class="img-products" src="assets/images/cupboards/placard-81/placard81_4-thumb.jpg" alt="thumb-image-4">
     </div>
     <div class="product-slider mr-20">
         <img class="img-products" src="assets/images/cupboards/placard-81/placard81_5-thumb.jpg" alt="thumb-image-5">
     </div>
     <div class="product-slider mr-20">
         <img class="img-products" src="assets/images/cupboards/placard-81/placard81_6-thumb.jpg" alt="thumb-image-6">
     </div>
</div>

大图像显示部分

<div id="slick-slide00show" class="product-image-wrapper custom-height">
   <img class="img-fluid curved-edges" src="assets/images/cupboards/placard-81/placard81_1.jpg" alt="plakar-1">
</div>
<div id="slick-slide01show" class="product-image-wrapper custom-height">
   <img class="img-fluid curved-edges" src="assets/images/cupboards/placard-81/placard81_2.jpg" alt="plakar-2">
</div>
<div id="slick-slide02show" class="product-image-wrapper custom-height">
   <img class="img-fluid curved-edges" src="assets/images/cupboards/placard-81/placard81_3.jpg" alt="plakar-3">
</div>
<div id="slick-slide03show" class="product-image-wrapper custom-height">
   <img class="img-fluid curved-edges" src="assets/images/cupboards/placard-81/placard81_4.jpg" alt="plakar-4">
</div>
<div id="slick-slide04show" class="product-image-wrapper custom-height">
   <img class="img-fluid curved-edges" src="assets/images/cupboards/placard-81/placard81_5.jpg" alt="plakar-5">
</div>
<div id="slick-slide05show" class="product-image-wrapper custom-height">
   <img class="img-fluid curved-edges" src="assets/images/cupboards/placard-81/placard81_6.jpg" alt="plakar-6">
</div>

由于缩略图部分包含在光滑的滑块中，因此我的目标是id =“ slick-slide01show”。如何使用相同的jQuery代码重复该部分以显示另一幅图像（用于另一种产品）？我只能在以与该节相关的特殊名称作为目标的类时复制功能，但这意味着我必须为使用的每个节重复jQuery代码：

让$ firstShowcaseImage = $（'。first-product-image-wrapper'）; 让$ firstThumbnailImage = $（'。first-product-slider'）;

让$ secondShowcaseImage = $（'。second-product-image-wrapper'）; 让$ secondThumbnailImage = $（'。second-product-slider'）; 这样的事情。

提前致谢。

使用Jquery创建选项卡时如何避免代码重复