如何缩短这个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的所有元素,因此选择器可以与变量一起使用以选择这些元素.然后与可以在jQuery的组元件被用于添加和移除分别传递的类.indexsitting:ltsittingaddClass()removeClass()

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