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

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

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

在swiper.js中有一个名为“onThumbClick”的函数，我在控制台上登录了它，我注意到当我使用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>

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