Question

我正在研究需要缩放功能的产品轮播。旋转木马是自举，定制为每张幻灯片显示两个项目。我然后使用jQuery缩放进行产品缩放，但稍微定制了一下，这样它就会在点击时打开一个模态，然后进行缩放。

这是我的旋转木马的代码

<div id="Carousel" class="carousel multi-item-carousel slide small--hide">
  <div class="grid grid--no-gutters">
<div class="carousel-inner">
    {% assign variable = 0 %}
      {% for image in product.images %}
   <div class="item">
   <div class="grid__item one-half carousel-padding">
       <style>
  .imgModal_{{ image.id }} {
    width: 100%;
    margin: 0 auto;
    display: none;
  }
   </style>
           <img class="{{ image.id }}_test" src="{{ image.src | img_url: 'master' }}" alt="{{ image.alt | escape }}" class="product-zoom"/>
           <div class="imgModal_{{ image.id }} imgmodal">
             <div class="img-zoom-container">
               <span class="close"></span>
             <img src="{{ image.src | img_url: 'master'  }}" alt="{{ image.alt | escape }}" class="image-zoom">
             <script>
               ;(function(window, $, undefined) {
                 $('.{{ image.id }}_test').on('click', function(){
                  $(this).next('.imgModal_{{ image.id }}').css('display', 'block');
                });

                $('.imgModal_{{ image.id }}').click(function(){
                  $('.imgModal_{{ image.id }}').css('display', 'none');
                });
              })(window, jQuery);
             </script>
           </div>
            </div>
   </div>
 </div>
     {% endfor %}
</div>
<a data-slide="prev" href="#Carousel" class="left carousel-control">{% include 'carousel-left'%}</a>
    <a data-slide="next" href="#Carousel" class="right carousel-control">{% include 'carousel-right'%}</a>
</div>
</div>

多项旋转木马的JS：

<script>
$( document ).ready(function() {
$(".carousel-inner div:first").addClass("active");
});
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
  interval: false
});

// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

});
</script>

我现在的问题是，当它克隆mutli项目轮播的图像时，模态的点击事件不会对克隆项目起作用。我最初将{{ image.id }}_test设置为ID，因此认为这可能是问题，但在将其更改为某个类后，它仍然无效。

有关如何解决此问题的任何想法？

Answer 1

我实际上只是自己解决了这个问题，以防它对任何人造成问题，因为点击事件在克隆中丢失了所以只需添加

next.children(':first-child').clone(true,true).appendTo($(this));

到我的克隆功能。

jquery zoom和bootstrap多项旋转木马的问题

1 个答案: