javascript - 使用 .show() 和 .hide() 具有两个不同的功能，而不会相互冲突

Question

请看这里：http: //jsfiddle.net/mAMY2/1/

如您所见，有一个过滤器功能以及一个“显示更多”功能。我想更改“显示更多”功能的方式，以避免与过滤器功能冲突。例如，也许有 .show() 和 .hide() 的替代方案？

冲突总结：

“显示更多”功能和“过滤”功能都通过操作显示值来工作。例如，如果仅显示九个框中的三个并且您选择过滤特定类别，则可能会显示三个以上的框。同样，如果您选择仅 > 显示特定类别，但随后希望显示更多，则其他类别也将被 ?> 显示。

谢谢

Answer 1

您可以使用.addClass然后.removeClass使用 css 控制可见性。

Answer 2

如果我理解正确，当您单击“显示更多”时，您期望选择相同的类别框，该框只应显示不全部，然后您可以使用它，我认为这不是一个好方法，因为如果类别增加，if 条件也会增加。但至少你有一个想法

var cat=0;
$('#showMore a').click(function(){
    if(cat==0)
     $('.box:hidden:lt(3)').animate({height: 'toggle'}, 500);
    if(cat==1)
     $('.box cat1:hidden:lt(3)').animate({height: 'toggle'}, 500);
    if(cat==2)
     $('.box cat2:hidden:lt(3)').animate({height: 'toggle'}, 500);
});