jquery下一个克隆的照片库

我正在使用jquery克隆的图像库复制单击的图像缩略图并将其附加到#big div，这有助于居中和固定位置。我遇到的问题是当我点击#right_arrow或#left_arrow，我似乎无法弄清楚如何选择列表中的下一个或上一个项目并将其附加到正文。jquery下一个克隆的照片库

我知道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(''); 
      }) 

     });

来源

2013-04-04 EmmaGamma

这是你拨弄一个固定的版本：http://jsfiddle.net/abeisgreat/fu3fX/

你的代码有阻止它正常工作的几个问题。首先，你的.click（）调用在你的.each文件中，这意味着#big，#right_arrow，#left_arrow都会有相同函数的多个绑定，这不是你想要的。

其次，你正确地假设.next（）和.prev（）是你想要使用的，问题在于$ img.next（）不存在，因为你正在包装每个img在.each（）中的li标签中。由于这$ img没有sibilings和.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（）完全相同以向前推进。你非常接近，就像我说过的，我认为最大的问题是与李的包装，从你的img标签中删除任何sibilings！

希望这有助于安倍

来源

2013-04-04 19:48:28

好吧，这几乎是完美的，但由于某些原因，当你点击缩略图，它只是附加最后一个到#big DIV，而不是被点击的一个。 – EmmaGamma 2013-04-04 19:56:12

我重新定义了$ img后，我的不好的小监督，http://jsfiddle.net/abeisgreat/fu3fX/1/，忘记将$ img更改为$（this）。 – 2013-04-04 19:59:20

是的，我只是想通了。非常感谢！！！ – EmmaGamma 2013-04-04 20:00:17

jquery下一个克隆的照片库

回答

相关问题