Question

我有一个网页，显示一个产品列表（从数据库动态加载）。每个产品都有一个“快速查看”按钮，用户可以单击该按钮，然后会弹出一个模式，显示该产品及其名称的光滑轮播。但是，模态轮播在首次点击后未设置正确的数据属性。

简而言之，我想做的是这个；当用户点击“快速查看”按钮时；

从按钮元素获取3个数据属性（图像路径，缩略图路径，名称）
将属性设置为模态元素中的属性
将模态附加到滑模上，然后显示模态

这是我的代码；我已经尝试去掉了许多不重要的东西，并张贴了相关部分。

<!--the button that is clicked-->
<div>
  <a href='#' class="block2-btn js-show-modal1" data-pdct-img="image.jpg" data-pdct-name="shoe1">
    Quick View
  </a>
</div>


<!--the code for the modal - initially it's hidden, pops up on click of the button above-->
<div class="wrap-modal1 js-modal1">
 <div class="overlay-modal1 js-hide-modal1"></div>
    <button class="js-hide-modal1">
     <img src="images/icons/icon-close.png" alt="CLOSE">
    </button>

    <div class="wrap-slick3">
     <div class="wrap-slick3-dots"></div>
     <div class="wrap-slick3-arrows"></div>
     <div class="slick3 gallery-lb">            
      <div class="item-slick3" data-thumb="" id="pdct_img_1_thumb">                                  
       <div class="wrap-pic-w pos-relative">
        <img src="" alt="IMG-PRODUCT" id="pdct_img_1">                                   
        <a href="" id="pdct_img_1_large">                           
         <i class="fa fa-expand"></i>                                        
        </a>
        </div>                              
       </div>                               
       <!--other thumbnails-->                                   
      </div>                
      <div>
        <h4 id="product_name"></h4>
      </div>
     </div>
  </div>

        $('.js-show-modal1').on('click', function(){
            //e.preventDefault();

            var name = $(this).attr("data-pdct-name");
            var img = $(this).attr("data-pdct-img");

            $("#product_name").html(name);
            $("#pdct_img_1").attr('src','images2/'+img);
            $("#pdct_img_1_thumb").attr("data-thumb",'images2/'+img);
            $("#pdct_img_1_large").attr('href','images2/'+img);
            $('.js-modal1').addClass('show-modal1');


            $('.wrap-slick3').each(function(){
                $(this).find('.slick3').slick({
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    fade: true,
                    infinite: true,
                    autoplay: false,
                    autoplaySpeed: 6000,

                    arrows: true,
                    appendArrows: $(this).find('.wrap-slick3-arrows'),
                    prevArrow:'<button class="arrow-slick3 prev-slick3"><i class="fa fa-angle-left" aria-hidden="true"></i></button>',
                    nextArrow:'<button class="arrow-slick3 next-slick3"><i class="fa fa-angle-right" aria-hidden="true"></i></button>',

                    dots: true,
                    appendDots: $(this).find('.wrap-slick3-dots'),
                    dotsClass:'slick3-dots',
                    customPaging: function(slick, index) {
                        var portrait = $(slick.$slides[index]).data('thumb');
                        return '<img src=" ' + portrait + ' "/><div class="slick3-dot-overlay"></div>';
                    },  
                });
            });
        });     

        $('.js-hide-modal1').on('click',function(){
            $('.js-modal1').removeClass('show-modal1');
        });

这是问题所在；当我第一次单击“快速查看”按钮时，模态中的每个属性均已正确设置。当我关闭模态并单击另一个“快速查看”按钮时，我单击的第一个按钮的缩略图路径是此后单击的所有后续按钮的持久性。

我非常想让光滑的轮播在自定义分页功能（对于缩略图）中获取正确的数据属性，我对此深感困惑。我很高兴澄清所有可能不清楚的问题。

任何指导都是值得赞赏的。

Answer 1

我终于想出了解决办法，并以为将来有人认为有用时，我会给出答案。

我是新手，所以我不知道这个。要了解光滑的轮播，重要的一点是它实际上是一系列幻灯片。轮播（数组）不是通过html / javascript操作修改的，而是通过使用slick向数组（轮播）添加和删除幻灯片的方式-在这种情况下，幻灯片是格式化为html的格式，以显示图像或与此相关的任何元素。 / p>

考虑到上述情况，关闭问题中的模式（并设置新的数据属性值）不会更改轮播中的缩略图/幻灯片。要将幻灯片更改为新产品的幻灯片，必须首先从滑模中删除先前的值（在关闭模态时），然后添加新的（在打开模态时）。该解决方案可能有点“棘手”，但可以完成所需的工作。这是代码；


   //set the slick options outside the click event handler
   $('.wrap-slick3').each(function(){
     $(this).find('.slick3').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        infinite: true,
        autoplay: false,
        autoplaySpeed: 6000,

        arrows: true,
        appendArrows: $(this).find('.wrap-slick3-arrows'),
        dots: true,
        appendDots: $(this).find('.wrap-slick3-dots'),
        dotsClass:'slick3-dots',
        //remove customPaging because slides are now to be added independently --- see below
     });
   });



   $('.js-show-modal1').on('click', function(){       //click to open modal
     var name = $(this).attr("data-pdct-name");
     var img = $(this).attr("data-pdct-img");

     $("#product_name").html(name);     //set other stuff in the modal

     //add new slides to slick (i.e, every time a modal is opened, construct a new carousel)
     $(".wrap-slick3").each(function(){
        $(this).find(".slick3").slick("slickAdd","<div class='item-slick3' 
             data-thumb='images2/"+img+"'>       
             <div class='wrap-pic-w pos-relative'> 
              <img src='images2/"+img+"'  alt='IMG-PRODUCT'> 
              <a class='' href='images2/"+img+"'>
               <i class='fa fa-expand'></i>
              </a> 
             </div> 
            </div>"); //have limited it to one slide for demo purposes
     });
     $('.js-modal1').addClass('show-modal1');   //then display the modal
   }):    
   //end of modal open/click actions

   //Actions for when the modal is closed
   $('.js-hide-modal1').on('click',function(){
      $('.js-modal1').removeClass('show-modal1');    //close the modal

      //after closing the modal, (empty)remove all the previous slides from the carousel
      $('.wrap-slick3').each(function(){
        $(this).find('.slick3').slick('slickRemove',null,null,true);
      });
   });

<!--Finally modify the html to remove the code for the slides -- because this is now being inserted(added) with slick; see JS above-->
<div class="wrap-modal1 js-modal1">
 <div class="overlay-modal1 js-hide-modal1"></div>
    <button class="js-hide-modal1">
     <img src="images/icons/icon-close.png" alt="CLOSE">
    </button>

    <div class="wrap-slick3">
     <div class="wrap-slick3-dots"></div>
     <div class="wrap-slick3-arrows"></div>
     <div class="slick3">
       <!--code for the slides will be inserted here using the above JS-->                                   
     </div>                
    <div>
     <h4 id="product_name"></h4>
    </div>
   </div>
  </div>

这样才能达到预期的效果！

光滑的轮播自定义分页未设置动态数据属性

1 个答案: