Jquery在預覽函數調用後沒有正常執行功能

Question

好吧，我是一個小菜鳥，並不完全知道我該如何提出這個問題。

我會展示我的代碼開始

HTML：

<div class="image-popup-container"> 
    <button id="close"><i class="fa fa-times"></i></button> 
    <div id="closearea"></div> 

    <ul id="image-popup" class="image-popup"> 
     <li class="product-image"> 
      <img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-guarantee-7-year-square.png" alt="AlgaeCal 7 Years Guarantee" /> 
     </li> 
     <li class="product-image"> 
      <img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-Plus-Product-Main-Image.png" alt="AlgaeCal Plus Main Product Image" /> 
     </li> 
     <li class="product-video"> 
      <iframe src="//fast.wistia.net/embed/iframe/w4ithbv9tz" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="640" height="360"></iframe> 
     </li> 
    </ul> 
</div> 

<div class="images"> 
    <div id="image-preview" data-slick-index="0"> 
     <img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-guarantee-7-year-square.png" alt="AlgaeCal 7 Years Guarantee" /> 
    </div> 
    <ul id="image-thumbs" class="thumbnails"> 
     <li class="product-image-thumbnail"> 
      <img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-guarantee-7-year-square.png" alt="AlgaeCal 7 Years Guarantee" /> 
     </li> 
     <li class="product-image-thumbnail"> 
      <img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-Plus-Product-Main-Image.png" alt="AlgaeCal Plus Main Product Image" /> 
     </li> 
     <li class="product-video-thumbnail"> 
      <img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-Plus-Product-Main-Video-Thumbnail.jpg"> 
     </li> 
    </ul> 
</div> 

jQuery的

$(document).ready(function(){ 

// Load Carousel of thumbnails 
$('.thumbnails').slick({ 
    dots: false, 
    prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow slick-disabled" aria-label="Previous" role="button" aria-disabled="true" style="display: block;"><i class="fa fa-chevron-left"></i></button>', 
    nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;" aria-disabled="false"><i class="fa fa-chevron-right"></i></button>', 
    infinite: false, 
    speed: 300, 
    slidesToShow: 1, 
    centerMode: false, 
    variableWidth: true 
}); 

// Grab Preview image 
var imagePreview = $("#image-preview") 

// Open product video thumbnail into iframe popup 
// Listen for when product-video-thumbnail is clicked 
$('.product-video-thumbnail').click(function(){ 
    // Grab clicked product-video-thumbnail data-slick-index 
    var videoData = $(this).attr('data-slick-index'); 

    imagePopupContainer.fadeIn(); 
    $('.image-popup').slick({ 
     centerMode: true, 
     prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow slick-disabled" aria-label="Previous" role="button" aria-disabled="true" style="display: block;"><i class="fa fa-chevron-left"></i></button>', 
     nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;" aria-disabled="false"><i class="fa fa-chevron-right"></i></button>', 
     centerPadding: '60px', 
     slidesToShow: 1, 
     responsive: [ 
      { 
       breakpoint: 768, 
       settings: { 
        arrows: false, 
        centerMode: true, 
        centerPadding: '40px', 
        slidesToShow: 3 
       } 
      }, 
      { 
       breakpoint: 480, 
       settings: { 
        arrows: false, 
        centerMode: true, 
        centerPadding: '40px', 
        slidesToShow: 1 
       } 
      } 
     ] 
    }); 
    // Go to the correct slide 
    $('.image-popup').slick('slickGoTo', videoData); 
}); 

// Listen for when product-image-thumbnail is clicked 
$('.product-image-thumbnail').click(function(){ 
    // Grab clicked product-image-thumbnail attributes and img attributes 
    var imageSrc = $(this).find('img').attr('src'); 
    var imageAlt = $(this).find('img').attr('alt'); 
    var imageData = $(this).attr('data-slick-index'); 

    // Fade out the preview image 
    imagePreview.fadeOut(function(){ 
     // Change preview image src to clicked thumbnail src 
     imagePreview.find('img').attr("src", imageSrc); 
     // Change preview image alt to clicked thumbnail alt 
     imagePreview.find('img').attr("alt", imageAlt); 
     // Update the slick-index for modal popup carousel 
     imagePreview.attr("data-slick-index", imageData); 
    }); 
    // Fade the preview image back into view 
    imagePreview.fadeIn(); 
}); 

var imagePopupContainer = $(".image-popup-container") 

imagePreview.click(function(){ 
    imagePopupContainer.fadeIn(); 
    $('.image-popup').slick({ 
     centerMode: true, 
     prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow slick-disabled" aria-label="Previous" role="button" aria-disabled="true" style="display: block;"><i class="fa fa-chevron-left"></i></button>', 
     nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;" aria-disabled="false"><i class="fa fa-chevron-right"></i></button>', 
     centerPadding: '60px', 
     slidesToShow: 1, 
     responsive: [ 
      { 
       breakpoint: 768, 
       settings: { 
        arrows: false, 
        centerMode: true, 
        centerPadding: '40px', 
        slidesToShow: 3 
       } 
      }, 
      { 
       breakpoint: 480, 
       settings: { 
        arrows: false, 
        centerMode: true, 
        centerPadding: '40px', 
        slidesToShow: 1 
       } 
      } 
     ] 
    }); 
    var index = $("#image-preview").attr("data-slick-index"); 
    alert(index); 
    $('.image-popup').slick('slickGoTo', index); 
}) 

$("#closearea").click(function(){ 
    imagePopupContainer.fadeOut(); 

}); 
$("#close").click(function(){ 
    imagePopupContainer.fadeOut(); 
}); 
}); 

您可以在這裏http://algaecal.cloudcreations.ca/

行動目前看到當你點擊圖片預覽應該彈出一個警告框data-slick-index值，然後打開全尺寸的預覽圖像。如果關閉全尺寸圖像並單擊其他縮略圖，則會將預覽圖像更新爲單擊的縮略圖。然後，如果您點擊更新的預覽圖像，它應該會顯示一個警告框，然後顯示更新的預覽圖像，但它會顯示先前的預覽圖像並且不會顯示警告框。

我不知道爲什麼會發生這種情況。它就像執行第一個jquery函數之後，DOM被更新並且執行的下一個jquery函數不會從DOM獲取正確的`data-slick-index'，並且不會執行警報。

我非常抱歉，這個措辭不佳的問題。我只是沒有知識來正確地問這個問題。

任何幫助將不勝感激。

Answer 1

您必須在設置圖片後進行淡入淡出。 試一試，讓我們知道它是否有幫助