javascript - 第一次点击时弹出窗口会显示 div

Question

我正在使用jQuery Simple Slider Plugin当用户单击图像时显示图像的额外信息。

该插件在弹出窗口中显示图像描述。效果很好。

<小时/>

问题

但是，我想向弹出窗口添加另一个 div，其类名为“like-image”。

第一次单击图像时，一切都会按我希望的方式运行。图像描述和类似图像的 div 都会显示。

如果您再次单击该图像而之前没有重新加载页面，类似图像的 div 将不再显示。

我做错了什么？

---

THE FIDDLE

<小时/>

HTML

<ul  class="product-gallery">
    <li class="gallery-img">
        <img src='http://lorempixel.com/200/300' alt="img01" /> 
        <div class="image-description" data-desc="Image1 Lorem Ipsum is simply dummy"></div>
        <div class="like-image"><b>This div just displays on first click.</b></div>
    </li>                   
</ul>

JQUERY

/*
* jQuery Slider Plugin
* Version : Am2_SimpleSlider.js
* author  :amit & amar
*/

(function ($) {

jQuery.fn.Am2_SimpleSlider = function () {
    //popup div
    $div = $('<div class="product-gallery-popup"> <div class="popup-overlay"></div><div class="product-popup-content"><div class="product-image"><img id="gallery-img" src="" alt="" /><div class="gallery-nav-btns"><a id="nav-btn-next" class="nav-btn next" ></a><a id="nav-btn-prev" class="nav-btn prev" ></a></div></div><div class="product-information"><p class="product-desc"></p><hr><div class="clear"></div><br><div class="like-image"></div><div class="clear"></div><hr></div><div class="clear"></div><a href="" class="cross">X</a></div></div>').appendTo('body');

    //on image click   
    $(this).click(function () {
        $('.product-gallery-popup').fadeIn(500);
        $('body').css({ 'overflow': 'hidden' });
        $('.product-popup-content .product-image img').attr('src', $(this).find('img').attr('src'));
        $('.product-popup-content .product-information p').text($(this).find('.image-description').attr('data-desc'));

        // My attempt of adding the div to the popup window
        // The next line of code seems just to work once
        $('.product-popup-content .product-information .like-image').html($(this).find('.like-image'));

        $Current = $(this);
        $PreviousElm = $(this).prev();
        $nextElm = $(this).next();
        if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
        else { $('.nav-btn.prev').css({ 'display': 'block' }); }
        if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
        else { $('.nav-btn.next').css({ 'display': 'block' }); }
    });
    //on Next click
    $('.next').click(function () {
        $NewCurrent = $nextElm;
        $PreviousElm = $NewCurrent.prev();
        $nextElm = $NewCurrent.next();
        $('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);

        $('.product-popup-content .product-information p').text($NewCurrent.find('.image-description').attr('data-desc'));
        $('.product-popup-content .product-information .like-image').html($NewCurrent.find('.like-image'));
        if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
        else { $('.nav-btn.prev').css({ 'display': 'block' }); }
        if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
        else { $('.nav-btn.next').css({ 'display': 'block' }); }
    });
    //on Prev click
    $('.prev').click(function () {
        $NewCurrent = $PreviousElm;
        $PreviousElm = $NewCurrent.prev();
        $nextElm = $NewCurrent.next();
        $('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);

        $('.product-popup-content .product-information p').text($NewCurrent.find('.image-description').attr('data-desc'));
        $('.product-popup-content .product-information .like-image').html($NewCurrent.find('.like-image'));
        if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
        else { $('.nav-btn.prev').css({ 'display': 'block' }); }
        if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
        else { $('.nav-btn.next').css({ 'display': 'block' }); }
    });
    //Close Popup
    $('.cross,.popup-overlay').click(function () {
        $('.product-gallery-popup').fadeOut(500);
        $('body').css({ 'overflow': 'initial' });
    });

    //Key Events
    $(document).on('keyup', function (e) {
        e.preventDefault();
        //Close popup on esc
        if (e.keyCode === 27) { $('.product-gallery-popup').fadeOut(500); $('body').css({ 'overflow': 'initial' }); }
        //Next Img On Right Arrow Click
        if (e.keyCode === 39) { NextProduct(); }
        //Prev Img on Left Arrow Click
        if (e.keyCode === 37) { PrevProduct(); }
    });

    function NextProduct() {
        if ($nextElm.length === 1) {
            $NewCurrent = $nextElm;
            $PreviousElm = $NewCurrent.prev();
            $nextElm = $NewCurrent.next();
            $('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);

            $('.product-popup-content .product-information p').text($NewCurrent.find('.image-description').attr('data-desc'));
            $('.product-popup-content .product-information .like-image').html($NewCurrent.find('.like-image'));
            if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
            else { $('.nav-btn.prev').css({ 'display': 'block' }); }
            if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
            else { $('.nav-btn.next').css({ 'display': 'block' }); }
        }

    }

    function PrevProduct() {
        if ($PreviousElm.length === 1) {
            $NewCurrent = $PreviousElm;
            $PreviousElm = $NewCurrent.prev();
            $nextElm = $NewCurrent.next();
            $('.product-popup-content .product-image img').clearQueue().animate({ opacity: '0' }, 0).attr('src', $NewCurrent.find('img').attr('src')).animate({ opacity: '1' }, 500);

            $('.product-popup-content .product-information p').text($NewCurrent.find('.image-description').attr('data-desc'));
            $('.product-popup-content .product-information .like-image').html($NewCurrent.find('.like-image'));
            if ($PreviousElm.length === 0) { $('.nav-btn.prev').css({ 'display': 'none' }); }
            else { $('.nav-btn.prev').css({ 'display': 'block' }); }
            if ($nextElm.length === 0) { $('.nav-btn.next').css({ 'display': 'none' }); }
            else { $('.nav-btn.next').css({ 'display': 'block' }); }
        }

    }
};

} (jQuery));

// Call the plugin
$('.gallery-img').Am2_SimpleSlider();

我将非常感谢任何形式的帮助!

Answer 1

用这个替换你的行

   // My attempt of adding the div to the popup window
   // The next line of code seems just to work once
   $('.product-popup-content .product-information .like-image').html($(this).find('.like-image').html());

如果您仍然发现问题，请告诉我。我在 fiddle 中检查了它，它工作正常。