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'); 
       } 
     }); 
    }); 

我真的不知道为什么你没有工作。我对此很好奇。 为了使淡入淡出效果更好，您需要使用绝对定位，以便图像不会“跳跃”。