使用jQuery過濾內容

Question

我正在嘗試使用jQuery和多個類創建可過濾的照片庫。 我已經設置了一些代碼，但是似乎沒有用。 誰能給我任何有關如何解決此功能的見解？

    $(document).ready(function(){
      $('#sorter a').click(function(e){
        var sortName = $(this).text().toLowerCase().replace(' ','-');
        if(sortName === 'all-images'){
        $('#photorow1 li').show().removeClass('hidden');
          } 
        else {
   $('#photorow1 li').filter(sortName).show().removeClass('hidden')
               .end().not(sortName).hide().addClass('hidden');
         }
e.preventDefault();
 });
});

任何幫助將不勝感激！！

*更新代碼

Answer 1

問題是您在做任何工作之前都在做一個return false ，將其移到點擊處理程序的末尾:)

總體來說，您可以對其進行清理，如下所示：

$(function(){
  $('#sorter a').click(function(e){
    var sortName = $(this).text().toLowerCase().replace(' ','-');
    if(sortName === 'all-images') {
       $('#photorow1 li').show();
    } else {
       $('#photorow1 li').filter(filterVal).show().removeClass('hidden')
                   .end().not(filterVal).hide().addClass('hidden');
    }
    e.preventDefault();
  });
});

我建議您只添加display: none; 到.hidden CSS規則（如果需要該類別的東西），否則只是.hide() / .show()的作品。

Answer 2

對於初學者， return false;否則， return false; 應該在函數的末尾，因為該函數之后的所有代碼都將被忽略。

另外，您不需要使用e.preventDefault(); 在相同的功能中，它們有點重疊。 您可以在此處閱讀有關它們相似之處的更多信息。 選一個。