Question

Is there a more efficient way to write the following script? All it’s doing is updating the count of an item and then displaying the singular or plural text for that count depending on how many it finds.

The code just seems redundant to say “show this one and hide this one, unless the opposite is true then hide this one and show that one”. Shouldn’t there be a way to pass a boolean into something that should show or hide based on that?

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

Answer 1

Put it in a function, something along the lines of:

function togglePlural(baseSelectorName,count) {

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