Jquery循环追加内容答案

【问题标题】：Jquery loop append contentsJquery循环追加内容
【发布时间】：2016-10-21 09:44:04
【问题描述】：

我有一个产品滑块，每张幻灯片都包含一张图片。我想单击相应的图像并将其加载到父级之外的 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/

【问题讨论】：

你的$('#product-slider-flickity img').click(function(){ 被解雇了吗？什么时候点击？
是的，请看 js fiddle 演示：jsfiddle.net/nvk6v6n0/4

标签： javascript jquery css modal-dialog image-gallery

【解决方案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/

【讨论】：

【解决方案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');
 });

【讨论】：