Как сделать код JavaScript/jQuery короче

Question

Есть ли способ сделать это четыре раза, чтобы сделать его короче? Я пытаюсь изменить класс от стояния до сидящего, а затем снова по одному за раз.

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

Answer 1

Вы можете использовать :lt и :gt селекторы.

:lt(index) выберите все элементы с индексом ниже index в соответствии с установленным набором. :gt(index) выберите все элементы с индексом, большим index, в соответствии с установленным набором. ^{Из Jquery Docs}

как класс sitting должен быть добавлен ко всем элементам, имеющим класс .standing которого index меньше, чем значение переменной sitting, :lt селектор может быть использован с переменной sitting, чтобы выбрать такие элементы. Затем addClass() и removeClass() могут использоваться в наборе элементов jQuery для добавления и удаления пройденных классов соответственно.

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

Answer 2

Ну, вы можете сделать с уродливой для цикла:

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

Answer 3

Это только проект, и это не проверялось, но есть логика в том, что вы пытаетесь сделать. Как только вы найдете логику, вы просто используете ее в цикле. Как что:

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

Answer 4

Может быть что-то вроде этого:

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

или это:

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

Answer 5

У вас есть HTML и CSS, чтобы сопровождать это?

Вы можете использовать переменную, чтобы указать «энный» типа:

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

хотя и не уверен, что это работает для случая, когда я = 1. Вы, возможно, потребуется первая в типа там.

Без CSS и HTML неясно, что именно вы хотите сделать.

Вы можете посмотреть на это также:

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