jQuery语法帮助 - 幻灯片画廊代码

Question

我试图做一个简单的画廊，并不能找出什么是我的jQuery语法错误。

当用户点击缩略图（前三个列表项之一）时，我想clone()图片和标题，并将其粘贴到li.expand（全尺寸图片）。

我的jQuery函数的前两行正在工作（即“选择”类），但最后两行似乎没有做任何事情。我使用$(this)错误吗？

HTML

<ul class="gallery2"> 
     <li> 
      <img src="img/1.jpg" /> 
      <p>Caption 1</p> 
     </li> 
     <li> 
      <img src="img/2.jpg" /> 
      <p>Caption 2</p> 
     </li> 
     <li> 
      <img src="img/3.jpg" /> 
      <p>Caption 3</p> 
     </li> 

     <li class="expand"> 
      <!-- This space will be filled with whatever thumbnail is selected --> 
     </li> 
</ul> 

的jQuery

$(".gallery2 li").click(function() { 
    $(".gallery2 li").removeClass("selected"); 
    $(this).addClass("selected"); 
    $(".gallery2 li.expand").html().remove(); 
    $(this).html().clone().appendTo(".gallery2 li.expand"); 
}); 

Answer 1

html()返回一个字符串，而不是一个jQuery对象。也许你的意思是使用children()？另外，您可以使用empty()而不是使用.children().remove()。这些变化：

$(".gallery2 li").click(function() { 
    $(".gallery2 li").removeClass("selected"); 
    $(this).addClass("selected"); 
    $(".gallery2 li.expand").empty(); 
    $(this).children().clone().appendTo(".gallery2 li.expand"); 
}); 

您也可以考虑使用siblings()选择同级元素：

$(".gallery2 li").click(function() { 
    var me = $(this); 
    me.siblings().removeClass("selected"); 
    me.addClass('selected'); 
    me.siblings('.expand').empty().append(me.children().clone()); 
}); 

如果我们要去的所有麻烦，为什么不让它更通用把它变成一个插件？

$.fn.gallerize = function() { 
    this.on('click', 'li', function() { 
     var me = $(this); 
     me.siblings().removeClass('selected'); 
     me.addClass('selected'); 
     me.siblings('.expand').empty().append(me.children().clone()); 
    }); 
}; 

然后，它的这个简单的做一个画廊：

$('.gallery2').gallerize(); 

试试吧on JSFiddle。