带缩略图的 jQuery 画廊，单击功能只能运行一次

Question

我正在开发一个带有缩略图的简单 jQuery 图片库。

我想要的部分功能是，如果您单击当前显示的主画廊幻灯片 .show，它会删除 show 类，并淡出然后淡入下一张幻灯片并向其添加一个 show 类。相关缩略图还会将类别从非事件更改为事件，反之亦然。

我为此使用的 jQuery 是:

$( document ).ready(function() {

    $('.gallery-images .show').click(function() {
        $('.gallery-images .show').removeClass('show').fadeOut(300, function() {
            $(this).next().fadeIn(500).addClass('show');
        });
        $('.gallery .active').removeClass('active').addClass('inactive').next().removeClass('inactive').addClass('active');
    });

});

和 HTML:

<div id="gallery-71" class="content gallery gallery-71">
    <div id="gallery-images-wrapper">
        <div class="gallery-images">
                    <div class='gallery-image show' id='gallery-image-72'>
                        <img src="http://placekitten.com/g/300/200" />
                        <div class='caption'>1st caption</div>
                    </div>
                    <div class='gallery-image' id='gallery-image-73' style='display:none'>
                        <img src="http://placekitten.com/g/300/200" />
                        <div class='caption'>2nd caption</div>
                    </div>
                    <div class='gallery-image' id='gallery-image-74' style='display:none'>
                        <img src="http://placekitten.com/g/300/200" />
                        <div class='caption'>3rd caption</div>
                    </div>
                    <div class='gallery-image' id='gallery-image-75' style='display:none'>
                        <img src="http://placekitten.com/g/300/200" />
                        <div class='caption'>4th caption</div>
                    </div>
                    <div class='gallery-image' id='gallery-image-76' style='display:none'>
                        <img src="http://placekitten.com/g/300/200" />
                        <div class='caption'>5th caption</div>
                    </div>
                    <div class='gallery-image' id='gallery-image-77' style='display:none'>
                        <img src="http://placekitten.com/g/300/200" />
                        <div class='caption'>6th caption</div>
                    </div>
        </div><!--.gallery-images-->
    </div><!--#gallery-images-wrapper-->
    <div id="gallery-thumbs-wrapper">
        <ul class="gallery-thumbs noscript">
            <li class='gallery-thumb active' id='gallery-thumb-72'><img src="http://placekitten.com/g/50/50" /></li>
            <li class='gallery-thumb inactive' id='gallery-thumb-73'><img src="http://placekitten.com/g/50/50" /></li>
            <li class='gallery-thumb inactive' id='gallery-thumb-74'><img src="http://placekitten.com/g/50/50" /></li>
            <li class='gallery-thumb inactive' id='gallery-thumb-75'><img src="http://placekitten.com/g/50/50" /></li>
            <li class='gallery-thumb inactive' id='gallery-thumb-76'><img src="http://placekitten.com/g/50/50" /></li>
            <li class='gallery-thumb inactive' id='gallery-thumb-77'><img src="http://placekitten.com/g/50/50" /></li>
        </ul><!--.gallery-thumbs-->
    </div><!--#gallery-thumbs-wrapper-->
</div><!--gallery-->

目前，这仅在您第一次单击主图像时有效，但之后当我单击第二张幻灯片时，它似乎没有注册任何内容。

任何帮助将不胜感激，谢谢。

此处演示:http://jsfiddle.net/fFunx/1/

Answer 1

试试这个

$( document ).ready(function() {

        $('.gallery-images .gallery-image').on('click',function() {
               if ($(this).hasClass('show')) {
                 $(this).removeClass('show').hide(); 
                 $(this).next().addClass('show').show();
                 $('.gallery .active').removeClass('active').addClass('inactive').next().removeClass('inactive').addClass('active');
               }
        });
    });

我真的不知道为什么你的不起作用。我对此很好奇。 为了使淡入和淡出看起来更好，您需要使用绝对定位，这样图像就不会出现“跳跃”。