Javascript jquery下一步与照片库的克隆

我正在制作的图像库使用jquery clone复制单击的图像缩略图并将其附加到大div中，这有助于居中和固定定位。我遇到的问题是，当我单击右箭头或左箭头时，我似乎不知道如何选择列表中的下一项或上一项并将其附加到正文中

我知道jquery有。下一步，但我很难弄清楚它是如何工作的

以下是JSFIDLE：

---

以下是您的小提琴的固定版本：

您的代码存在一些问题，使其无法正常工作。首先，你的.click调用在你的.each中，这意味着大的、右箭头、左箭头都有同一个函数的多个绑定，这不是你想要的

其次，您正确地假设.next和.prev是您想要使用的，问题是$img.next不存在，因为您将每个img包装在.each中的li标记中。因此，$img没有sibling，.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')
})

向后或完全相同。下一步向前。你非常接近，就像我说的，我认为最大的问题是用李包装，它去除了你的img标签上的任何嘶嘶声

希望这有帮助，

---

Abe

好的，这几乎是完美的，但出于某种原因，当你单击缩略图时，它只是将最后一个添加到大div，而不是单击的那一个。我糟糕的小疏忽，在我重新指定$img后，忘记将$img更改为$this。但是有没有办法使其循环？当然，只需检查下一个img标记是否确实存在，如果不存在，请返回开始。

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