jquery - Jquery 图片库下一个按钮

Question

似乎无法让这个 jquery 库正常工作。我已经能够让 .galleryImgs 点击功能正常工作，但似乎无法让 #gallery-next 点击功能正常工作。它应该从下一个 .galleryImgs div 中获取 data-src 属性并将其设置在 .galleryImg src 中。我试过使用 addClass 和 removeClass ，所以它知道从哪个开始，但仍然无法工作。所有帮助表示赞赏。

<img class="galleryImgs" data-src="images/test-image-1.jpg" src="images/test-image-1-s.jpg" />
<img class="galleryImgs" data-src="images/test-image-2.jpg" src="images/test-image-2-s.jpg" />
<img class="galleryImgs" data-src="images/test-image-3.jpg" src="images/test-image-3-s.jpg" />
<img class="galleryImgs" data-src="images/test-image-4.jpg" src="images/test-image-4-s.jpg" />
<img class="galleryImgs" data-src="images/test-image-5.jpg" src="images/test-image-5-s.jpg" />

<img class="galleryImg" src="" />

<div id="gallery-next"></div>

<script type="text/javascript">
$(function(){
    $('.galleryImgs').click(function(){
        $('.gallery').show();
        $(this).addClass('catherine');
        var $galleryImg = $(this).attr("data-src");
        $('.galleryImg').fadeIn().attr("src", $galleryImg);
    });
    $('#gallery-next').click(function(){            
        $('.galleryImgs').hasClass('catherine').removeClass('catherine').next('.galleryImgs').addClass('catherine');
        var $galleryImg = $('.galleryImgs').hasClass('catherine').attr("data-src");
        $('.galleryImg').attr("src", $galleryImg);
    });
});
</script>

Answer 1

出于礼貌，我重写了你的函数：

$('#gallery-next').click(function(){       
    var el = $('.galleryImgs.catherine');
    if(el.length <= 0){
        console.log('something is really wrong...');
    }   
    el.removeClass('catherine').next('.galleryImgs').addClass('catherine');
    $('.galleryImg').attr("src", $('.galleryImgs.catherine').data('src'));
});

我对此进行了一点编辑，如果您这样做，请使用新代码。

Answer 2

这行得通。

$('#gallery-next').click(function(){
        var $galleryImg = $('.galleryImgs.hidden').removeClass('hidden').closest('.galleryImgs').nextAll('.galleryImgs').eq(0).addClass('hidden').attr("data-src");
        $('.galleryImg').fadeIn().attr("src", $galleryImg);
    });