CODEWITHSUNDEEP
javascriptjquery
Clams Are Great
Clams Are Great

Reputation: 280

How to make this JavaScript/jQuery code shorter

Is there a way to loop this four times to make it shorter? I am trying to change the class from standing to sitting and then back again one at a time.

if(sitting > 0) {
    $('.standing:first-of-type').removeClass('standing').addClass('sitting');
} else {
    $('.sitting:first-of-type').removeClass('sitting').addClass('standing');
}

if(sitting > 1) {
    $('.standing:nth-of-type(2)').removeClass('standing').addClass('sitting');
} else {
    $('.sitting:nth-of-type(2)').removeClass('sitting').addClass('standing');
}

if(sitting > 2) {
    $('.standing:nth-of-type(3)').removeClass('standing').addClass('sitting');
} else {
    $('.sitting:nth-of-type(3)').removeClass('sitting').addClass('standing');
}

if(sitting > 3) {
    $('.standing:nth-of-type(4)').removeClass('standing').addClass('sitting');
} else {
    $('.sitting:nth-of-type(4)').removeClass('sitting').addClass('standing');
}

Upvotes: 4

Views: 153

Answers (5)

SScotti
SScotti

Reputation: 2328

Do you have HTML and CSS to accompany that ?

You can use a variable to specify the 'nth' of type:

$('.standing:nth-of-type(' + i + ')')

although not sure that that works for the case where i = 1. You might need first-of-type there.

Without the CSS and HTML it isn't clear exactly what you want to do.

You might want to look at this also:

https://css-tricks.com/almanac/selectors/n/nth-of-type/

Upvotes: 1

Tornike Shavishvili
Tornike Shavishvili

Reputation: 1354

Maybe Something like this:

var numberOfPlaces = 4;

for(var i=0; i<sitting && i<numberOfPlaces ; i++){
    $('.standing:nth-of-type(' + (i+1) + ')').removeClass('standing').addClass('sitting');
}

for(var i=sitting; i<numberOfPlaces ; i++){
    $('.sitting:nth-of-type(' + (i+1) + ')').removeClass('sitting').addClass('standing');
}

or this:

var numberOfPlaces = 4;

for(var i=0; i<numberOfPlaces; i++){
    if(i<sitting){
        $('.standing:nth-of-type(' + (i+1) + ')').removeClass('standing').addClass('sitting');
    }else if(i>=sitting){
        $('.sitting:nth-of-type(' + (i+1) + ')').removeClass('sitting').addClass('standing');
    }
}

Upvotes: 1

Tushar
Tushar

Reputation: 87203

You can use :lt and :gt selectors.

:lt(index) select all elements at an index less than index within the matched set. :gt(index) select all elements at an index greater than index within the matched set.From jQuery Docs

As the class sitting should be added to all the elements having class .standing whose index is less than the sitting variable value, :lt selector can be used with the variable sitting to select such elements. Then addClass() and removeClass() can be used on the jQuery set of elements to add and remove the passed classes respectively.

$('.standing:lt(' + sitting + ')').removeClass('standing').addClass('sitting');
$('.sitting:gt(' + sitting + ')').removeClass('sitting').addClass('standing');

Upvotes: 5

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

This is just a draft and it's untested, but there is a logic in what you are trying to do. Once you find the logic, you just have use it in a loop. Like that :

var condition;
for(var i = 0; i < 4; i++){
    condition = sitting > i;
    $('.standing:nth-of-type(' + (i + 1) + ')').toggleClass('standing', !condition).toggleClass('sitting', condtion);
}

Upvotes: 1

Carlos Gant
Carlos Gant

Reputation: 732

Well, you can do with an ugly for-loop:

function toggleSitting(sitting){
    var initial = 0;
    var final = 3;
    for(var i = initial; i <= final; i++){
        $('.standing:nth-of-type(' + (i+1) +')')
            .toggleClass('standing', sitting < i)
            .toggleClass('sitting', sitting > i);
    }
}
toggleSitting(sitting);

Upvotes: 1

Related Questions