0

我正在制作的图片库使用 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('');
            })

        });
4

1 回答 1

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 标签中删除了任何兄弟姐妹！

希望这有帮助，安倍

于 2013-04-04T19:48:28.927 回答