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循环追加内容

2 个答案: