Swiper.js在缩略图上调用click（）

Question

我一直在使用swiper.js javascript库创建带有垂直缩略图的滑块，如果您单击缩略图，主图像将“滑动”到该图像。

this

当我手动单击缩略图时，该功能可以完美工作，但是，当用户选择色样时，我也需要更改主图像。我在缩略图元素上调用了javascript函数click（），在img本身和包含img的div上都尝试了click（）。不幸的是，我没有看到相同的功能，我的click事件确实注册了，并且我能够控制台日志/更改缩略图的边框，但是它没有运行swiper.js函数“ onThumbClick”：

swiper.js中有一个名为“ onThumbClick”的函数，我已经完成了控制台登录，并且我注意到当我使用javascript click（）时并未调用它，但是当我使用javascript click（）时会调用它。手动单击它。

我绝对不是javascript专业人士，所以我不确定在这里发生了什么。

编辑-添加一些代码段

HTML

<div class="wrapper">
    <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
            <?php foreach ($gallery as $image): ?>
                <?php if ($this->isGalleryImageVisible($image) and (strpos($image->getLabel(), 'swatch')) === false) : ?>
                    <div class="swiper-slide">
                        <div class="swiper-zoom-container">
                            <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $image->getFile())->resize($imgWidth, $imgHeight); ?>" data-zoom-image="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $image->getFile()); ?>"/>
                        </div>
                    </div>
                <?php endif; ?>
            <?php endforeach; ?>
        </div>
    </div>

    <?php if (count($gallery) > 0): ?>
        <div class="swiper-container gallery-thumbs">
            <div class="swiper-wrapper">
                <?php foreach ($gallery as $image): ?>
                    <?php 
                        $url = $image->getUrl();
                        $endUrl = strrpos($url, '/');
                        $sku = $endUrl === false ? $url : substr($url, $endUrl + 1);
                    ?>
                    <?php if ($this->isGalleryImageVisible($image) and (strpos($image->getLabel(), 'swatch')) === false) : ?>
                        <div class="swiper-slide thumbnails" data-sku="<?php echo $sku?>">
                            <img src="<?php echo $image->getUrl() ?>" data-sku="<?php echo $sku?>"/>
                        </div>
                    <?php endif; ?>
                <?php endforeach; ?>
            </div>
        </div>
    <?php endif; ?>

</div>

Javascript（初始化滑块）

<script>
var galleryThumbs = new Swiper('.gallery-thumbs', {
  direction: 'vertical',
  spaceBetween: 10,
  slidesPerView: 6,
  freeMode: true,
  watchSlidesVisibility: false,
  watchSlidesProgress: false,
  speed: 0,
});
var galleryTop = new Swiper('.gallery-top', {
  zoom: {
    maxRatio: 5,
  },
  spaceBetween: 10,
  direction: 'horizontal',
  thumbs: {
    swiper: galleryThumbs
  },
  //preventing zoom containers from appearing over inactive swiper images
  on:{slideChange: function() {
    jQuery('.zoomContainer').remove();
  }}
});

jQuery('.swiper-zoom-container').children('img').mouseover(function(){
    jQuery(this).elevateZoom();
});

</script>

致电单击我的缩略图：

jQuery(".thumbnails[data-sku='" + sku + "']").click(function(e) {
        console.log('click');
        console.log(jQuery(".thumbnails[data-sku='" + sku + "']"));
        jQuery(".thumbnails[data-sku='" + sku + "']").css('border', '1px solid black');
    });
    jQuery(".thumbnails[data-sku='" + sku + "']").click();