Jquery 循环追加内容

Question

我有一个产品滑块，每张幻灯片包含一张图片。我想单击相应的图像并将其加载到父级外部的 div 中，使其变为全屏（模式）。我不能为此使用插件。

备注我正在单独加载 HTML 以显示模态，因为我必须在滑块父级之外加载全屏图像才能正确显示。

这是我目前所拥有的，但它只显示了一张相同的图片：

// Product modal

// For each slide do something
 $( ".product--slider .slide" ).each(function( index ) {
    // Show the modal window
    $('#product-slider-flickity img').click(function(){
    $('.p-image-zoom').toggleClass('md-show');
 });
});

// Close the modal
$('.md-close-zoom').click(function() {
  $('.p-image-zoom').removeClass('md-show');
});

JsFiddle: https://jsfiddle.net/nvk6v6n0/4/

Answer 1

HTML 变化

<div class="md-modal size-popup p-image-zoom image-1">
  <div class="md-content">
    <div id='imageshow'>
    </div>    
    <button class="md-close-zoom">Close me</button>
  </div>
</div>

注意：删除冗余模型 HTML。

JS 变化

//Loop through all the slides...
$( ".product--slider .slide" ).each(function( index ) {
        // Show the modal window
    $('#product-slider-flickity img').click(function(){
        //Display clicked image in the modal popup
        $("#imageshow").html('<img src="'+$(this).attr('src')+'"/>');
      $('.p-image-zoom').toggleClass('md-show');      
    }); // Show the modal window
});

请检查工作演示：https://jsfiddle.net/nvk6v6n0/7/

Answer 2

您可以尝试给它提供 ID。

Jsfiddle

 $( ".product--slider .slide" ).each(function( index ) {
   $('#product-slider-flickity img').click(function(){
      var id= $(this).parent().attr("id");
      $('.'+id+'.p-image-zoom').toggleClass('md-show');
      $('.'+id+'.p-image-zoom').siblings(".md-modal").removeClass("md-show");
   });

 });
 $('.md-close-zoom').click(function() {
     $('.p-image-zoom').removeClass('md-show');
 });

Jquery 循环追加内容

Jquery loop append contents

javascript

css

jquery

modal-dialog

image-gallery