1

我目前正在使用以下代码块在两个 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();
});

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

4

4 回答 4

4

简单的：

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));

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

<button class="project-control" data-show=".all-projects">
    Show all projects
</button>
<button class="project-control" data-show=".my-projects">
    Show my projects
</button>

<div class="project all-projects">...</div>
<div class="project my-projects">...</div>

使用这样的 JavaScript：

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

注意在实际页面中，您可能希望缓存选定的元素。

于 2012-10-09T15:32:28.760 回答
1

您可以使用 toggle() 代替 show() 和 hide()。然后，您可以将 .projects 类添加到 .my-projects 和 .all-projects div，然后切换该选择器。

于 2012-10-09T15:32:05.167 回答
0

使用自定义属性怎么样？

html:

<div class='my-projects'>my-projects</div>
<div class='all-projects'>all-projects</div>
<span class='toggler' hide='.all-projects' show='.my-projects'>btn-my-projects</span>
<span class='toggler' hide='.my-projects' show='.all-projects'>btn-all-projects</span>

和 Javascript：

$('.toggler').click(function(e) {
    $($(this).attr('hide')).hide();
    $($(this).attr('show')).show();
});
于 2012-10-09T15:31:16.853 回答
0

您使用的方法是我会做的方式，但是如果您想浓缩，jquery的切换可能对您有用http://api.jquery.com/toggle/

于 2012-10-09T15:31:44.643 回答