javascript - jQuery 切换多个元素

Question

我无法使这段代码工作:

$("a.expand_all").on("click",function(){
    $(this).text('Hide');
    $('.answer').each(function () {
        $(this).slideDown(150, function () {
            $(this).show();
        });
    });
}, function () {
    $(this).text('Expand');
    $('.answer').each(function () {
        $(this).slideUp(150, function () {
            $(this).hide();
        });
    });
});

我试图折叠多个 div，但点击事件没有任何反应。我正在使用最新的 jQuery 1.10.1

Answer 1

在我看来，您正在使用 jQuery 的 .on方法不正确。该方法有一些重载，但没有一个(明智地)采用两个函数。

如果我理解您想要正确执行的操作，那么您只想在 <a> 时切换一些答案元素。标签被点击。你真正需要做的是有某种方法来确定你的答案是否得到扩展。有多种方法可以做到这一点，但我选择使用数据元素:

<a class="expand_all" href="#" data-collapsed="true">expand</a>
<p class="answer">I'm an answer!</a>
<p class="answer">Another answer</a>

那么你的 JavaScript 就可以这样简化:

$('a.expand_all').on("click",function(){
    if( $(this).data('collapsed') ) {
        $(this).text('hide').data('collapsed','');
        $('.answer').slideDown(150);
    } else {
        $(this).text('expand').data('collapsed','true');
        $('.answer').slideUp(150);
    }
});

我还简化了您的一些构造。特别是，在您的代码中:

$('.answer').each(function () {
    $(this).slideDown(150, function () {
        $(this).show();
    });
});

.each是不必要的。仅应用 jQuery 方法本质上等同于调用 .each 。您很少需要使用.each 。这样就简化为:

$('.answer').slideDown(150, function () {
    $(this).show();
});

然后，.slideDown在开始之前显示元素，因此无需调用 .show第二次。因此我们可以摆脱回调，将所有这些简化为:

$('.answer').slideDown(150);

您可以在此处查看所有这些操作:

http://jsfiddle.net/Jammerwoch/sRnkw/5/

最后，我询问是否有任何元素是动态添加的，因为如果是动态添加的，则附加它们的方式将不起作用。也就是说，jQuery 选择器运行一次，然后在添加新元素时不会重新运行。所以你必须更聪明。这在上面的 jsfiddle 中有描述。如果您需要对此进行更多说明，请告诉我。