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。