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函数没有获取正确的`data-slick-index＆＃39;来自DOM并且不会发出警报。

我非常抱歉这个措辞不好的问题。我只是没有足够的知识来正确地提出这个问题。

非常感谢任何帮助。

Answer 1

您必须在设置图片后进行淡化操作。尝试一下，让我们知道它是否有帮助

调用预览函数后，Jquery无法正常执行函数

1 个答案: