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()即可。< / p>

Answer 2

对于初学者，return false;应该在函数的末尾，因为在该函数之后的任何代码都将被忽略。

另外，在同一个函数中你不需要和e.preventDefault();，它们重叠一点。您可以详细了解它们的相似之处here。选一个。

使用jQuery过滤内容

2 个答案: