Jquery下一个克隆的照片库

Question

我正在制作的图像库使用jquery克隆复制被点击的图像缩略图，并将其附加到#bigdiv，这有助于居中和固定定位。我遇到的问题是，当我点击#right_arrow或#left_arrow时，我似乎不知道如何选择列表中的下一个或上一个项目并将其附加到正文中。

我知道jquery有。next()，但我有麻烦弄清楚它是如何工作的

这里是jsFiddle: http://jsfiddle.net/reveries/UgQre/

            $(document).ready
            $('img, div.wrapper').each( function() {
                var $img = $(this);
                $img.addClass('thumbnail');
                $img.wrap('<li></li>');
                $img.click(function() {
                    $img.clone().appendTo('#big');
                    $('#big').fadeToggle('slow');
                    $('#right_arrow').fadeIn('slow');
                    $('#left_arrow').fadeIn('slow');
                });
            $('#big').click(function(){
                $img.addClass('thumbnail');
                $('#big').fadeOut('slow');
                $(this).html('');
                $('#right_arrow').fadeOut('slow');
                $('#left_arrow').fadeOut('slow');
            })
            $('#right_arrow').click(function(){
                $('#big').html('');
            })
            $('#left_arrow').click(function(){
                $('#big').html('');
            })
        });

Answer 1

这是您的小提琴的固定版本:http://jsfiddle.net/abeisgreat/fu3fX/

你的代码有一些问题，使它不能正常工作。首先，.click()调用在.each中，这意味着#big， #right_arrow， #left_arrow都将对同一个函数有多个绑定，这不是您想要的。

其次，您假设。next()和。prev()是您想要使用的，问题是$img.next()不存在，因为您在。each()中将每个img包装在li标记中。因此，$img没有兄弟，.next()和.prev()将不会返回下一个img标签。所以你需要调用$img.parent().next().children()来获取下一张图片。

我所做的唯一主要更改是添加一个名为$selected_li的全局变量，它包含所选图像的li。一旦我们有了这个，我们就可以做这个了。

$('#left_arrow').click(function(){
    $('#big').html('');
    $selected_li.prev('li').children('img').clone().appendTo('#big');
    $selected_li = $selected_li.prev('li')
})

向后前进或与.next()完全相同向前移动。你非常接近，就像我说的，我认为最大的问题是用li包装，它从你的img标签中删除了任何兄弟姐妹!

希望这有帮助，安倍