jQuery：有没有更好的方法来切换两个div？

我目前正在使用以下代码块在两个div之间切换。

$('.btn-my-projects').click(function(e) { $('.my-projects').show(); $('.all-projects').hide(); }); $('.btn-all-projects').click(function(e) { $('.my-projects').hide(); $('.all-projects').show(); }); 

显然它有效，但我想知道是否有更好的方法来做到这一点。 感觉它可以被压缩到一个处理程序而不是两个。 如果我使用委托我可以使它成为一个单一的处理程序，但它会变得更长，需要条件检查才能看到单击了哪个按钮。

Answer 1

简单：

 function toggle(all) { $('.all-projects').toggle(all); $('.my-projects').toggle(!all); } $('.btn-my-projects').click(function() { toggle(false); }); $('.btn-all-projects').click(function() { toggle(true); }); 

如果你想得到更多的简洁：

 function makeClickHandler(all) { return function () { $('.all-projects').toggle(all); $('.my-projects').toggle(!all); }; } $('.btn-my-projects').click(makeClickHandler(false)); $('.btn-all-projects').click(makeClickHandler(true)); 

---

或者，您可以采用完全不同的方法，并使用HTML5 data-*属性将按钮显示和隐藏哪个div之间的链接放入标记中。 像这样的东西：

  Show all projects   Show my projects  
...
 
... 

使用这样的JavaScript：

 $('.project-control').on('click', function () { var showSelector = $(this).data('show'); $('.project').hide(); $(showSelector).show(); }); 

在实际页面中，您可能希望缓存所选元素。

Answer 2

您可以使用toggle（）而不是show（）和hide（）。 然后你可以在.my-projects和.all-projects div中添加一个类.projects，然后只切换那个选择器。

Answer 3

你正在使用的方法就是我这样做的方法，但是如果你想要压缩，jquery的切换可能会对你有用http://api.jquery.com/toggle/

Answer 4

那么使用自定义属性呢？

HTML：

 
my-projects
 
all-projects
 btn-my-projects btn-all-projects 

和Javascript：

 $('.toggler').click(function(e) { $($(this).attr('hide')).hide(); $($(this).attr('show')).show(); });