jQuery接下来是克隆的相册

Question

我正在制作的图片库使用jquery clone复制被单击的图片缩略图并将其附加到#big div，这有助于居中和固定位置。 我遇到的问题是，当我单击#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（）不存在，因为您将每个img封装在li标记中在您的.each（）中。 因此，$ 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标签中的所有细线！

希望这会有所帮助，安倍