使用jQuery更有效地隐藏/显示

More efficient hiding/showing with jQuery?

本文关键字：显示 隐藏 有效地 jQuery 使用      更新时间：2023-09-26

是否有更有效的方法来编写以下脚本?它所做的只是更新一个项目的计数，然后根据它找到的数量显示该计数的单数或复数文本。

代码似乎说"显示这个并隐藏这个，除非相反，然后隐藏这个并显示那个"是多余的。难道不应该有一种方法来传递一个布尔值，从而显示或隐藏它吗?

var includedCount = $("#services").find("tbody tr td:nth-child(1) :checkbox:checked").length;
var requiredCount = $("#services").find("tbody tr td:nth-child(2) :checkbox:checked").length;
$("#js-included-num").html(includedCount);
if(includedCount === 1){
    $("#js-included-plural").hide();
    $("#js-included-singular").show();
}else{
    $("#js-included-plural").show();
    $("#js-included-singular").hide();
}
$("#js-required-num").html(requiredCount);
if(requiredCount === 1){
    $("#js-required-plural").hide();
    $("#js-required-singular").show();
}else{
    $("#js-required-plural").show();
    $("#js-required-singular").hide();
}

将其放入一个函数中，类似于:

function togglePlural(baseSelectorName,count) {
    var p = $(baseSelectorName+'-plural'), s = $(baseSelectorName+'-singular');
    (count === 1 ? s : p).show();
    (count === 1 ? p : s).hide();
    // or use toggle()
}

您可以检查toggle方法

http://api.jquery.com/toggle/

如果元素是可见的，它将隐藏它，否则它将显示它

相关文章：