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

Jquery图像库下一个按钮

2 个答案: