jQuery循环步骤并添加html

Question

有办法简化下面的代码吗？当每个div被放入一个容器中时，代码就会下降。我只发布了我想简化的代码部分。我很感激在这方面的任何指导。

 if (count === 0) {
        $(".ernie").remove();
        $("#choices").append("<p class='ernie gone sr-only'>That was the last question</p>");
    }
    if (count === 1) {
        $(".ernie").remove();
        $("#choices").append("<p class='ernie sr-only'>There is 1 more question to select</p>");
    }
    if (count === 2) {
        $(".ernie").remove();
        $("#choices").append("<p class='ernie sr-only'>There are 2 questions to select</p>");
    }
    if (count === 3) {
        $(".ernie").remove();
        $("#choices").append("<p class='ernie sr-only'>There are 3 questions to select</p>");
    }
    if (count === 4) {
        $(".ernie").remove();
        $("#choices").append("<p class='ernie sr-only'>There are 4 questions to select</p>");
    }
    if (count === 5) {
        $(".ernie").remove();
        $("#choices").append("<p class='ernie sr-only'>There are 5 questions to select</p>");
    }

Answer 1

var message = "";
message = (count === 0) ? 'That was the last question' : (count === 1 ? 'There is 1 more question to select' : 'There are '+ count +' questions to select');     
$(".ernie").remove();
$("#choices").append("<p class='ernie gone sr-only'>"+message+"</p>");

Answer 2

$(".ernie").remove();
if (count) {
    $("#choices").append("<p class='ernie sr-only'>There " + (count > 1 ? "are" : "is") + " " + count + " more question" + (count > 1 ? "s" : "") + " to select</p>");
} else {
    $("#choices").append("<p class='ernie gone sr-only'>That was the last question</p>");
}

演示

Answer 3

您可以使用switch语句代替，也可以在if语句之前删除.ernie (无论如何，您只是要删除它)。

您还可以将文本设置为附加到#choices，而不是每次输入文本，并附加到count的值上。

var text = "<p class='ernie sr-only'>There " + (count > 1 ? "are " : "is ") + count + " more question to select</p>";

$(".ernie").remove(); // remove ernie anyway
switch(count) {
    case 1: // if count is equal to 1
        $("#choices").append("<p class='ernie gone sr-only'>That was the last question</p>");
       break; 
    case 2: // if count is equal to 2
        $("#choices").append(text);
        break;
    // and so on...
    deafault: // if count is not equal to any of the above numbers
        void(0); // javascript for do nothing
        break;
}

希望能帮上忙！