0
好吧，我是一个小菜鸟，并不完全知道我该如何提出这个问题。Jquery在预览函数调用后没有正常执行功能
我会展示我的代码开始
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'，并且不会执行警报。
我非常抱歉，这个措辞不佳的问题。我只是没有知识来正确地问这个问题。
任何帮助将不胜感激。
感谢您的回复！我尝试了在imagePreview.click（function（）{'）中的建议。当页面加载时，单击预览图像弹出完整大小，这是所需的，但只要您单击缩略图以更新预览图像，然后单击最新更新的预览图像，弹出的全尺寸图像不再有效 – xslibx