Question

我目前正在使用以下代码块在两个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到标记中。像这样：

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

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

Answer 2

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

Answer 3

使用自定义属性怎么样？

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

Answer 4

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

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

4 个答案: