CODEWITHSUNDEEP
jqueryloops
Laurence L
Laurence L

Reputation: 623

jQuery loop steps and add html

Is there a way to simplify the code below? The code counts down as each div is dropped into a container. I have only posted the section of code I would like to simplify. I appreciate any guidance in this.

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

Upvotes: 0

Views: 151

Answers (6)

styopdev
styopdev

Reputation: 2664

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

demo

Upvotes: 3

GROVER.
GROVER.

Reputation: 4378

You could use a switch statement instead, and also remove .ernie before your if statement (you're just going to remove it anyway).

You can also set the text to append to #choices, rather than typing it out every time, and append on count's value.

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

Hope it helps!

Upvotes: 0

Akshay
Akshay

Reputation: 805

it may be helpful

if (count === 0 || count === 1 || count === 2 || count === 3 || count === 4 || count === 5) {
    append(count)
}


countArray = ['That was the last question','There is 1 more question to select','There are 2 questions to select','There are 3 questions to select','There are 4 questions to select','There are 5 questions to select']

function append(count){
     $(".ernie").remove();
     $("#choices").append('<p class="ernie gone sr-only">'+countArray[count]+'</p>');
}

Upvotes: 0

Rahul Patel
Rahul Patel

Reputation: 5246

Please check below optimized snippet.

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

Upvotes: 0

Pooja JaJal
Pooja JaJal

Reputation: 293

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>");

Upvotes: 1

rambo
rambo

Reputation: 36

Following is more simple answer. You have to remove .element with .ernie always, so make that common then for zero you have "last" to be added, for others it's just the count. So here is your answer.

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

Upvotes: 0

Related Questions