如何使这段 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');
}

- Clams Are Great

---

请使用计数器和 $('.standing:first-of-type').each(function(idx, elem){})。 - Johannes Jander

从性能角度来看，将DOM选择器写入变量中（至少是相等的选择器）肯定是有意义的。 - Arnold Stoba

如果你的代码能够正常运行，而你唯一的问题是想让它更易于维护，那么你应该将这个问题发布到Code Review。 - ZeroOne

Answer 1

您可以使用:lt和:gt选择器。 :lt(index)选择匹配集合中小于index的所有元素。:gt(index)选择匹配集合中大于index的所有元素。^{来自jQuery文档} 由于应将类sitting添加到所有具有类.standing且其index小于sitting变量值的元素中，因此可以使用变量sitting与:lt选择器选择这些元素。然后可以在jQuery元素集上使用addClass()和removeClass()来分别添加和删除传递的类。

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

- Tushar

---

我喜欢那个两行代码的小技巧！ - Karl-André Gagnon

从问题中提供的代码来看，它似乎是一个整数。我已经在代码中添加了 sitting = sitting > 3 ? 3 : sitting < 0 ? 0 : Math.floor(sitting); 但随后又将其删除。我也要求 OP 添加完整的代码。 - Tushar

Answer 2

"

好的，你可以使用一个丑陋的for循环：

"

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

- Carlos Gant

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

- Karl-André Gagnon

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

- Tornike Shavishvili

Answer 5

您是否有HTML和CSS与此相关？

您可以使用变量来指定'类型的第n个元素：

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

虽然不确定这对i = 1的情况是否有效。您可能需要使用first-of-type。

没有CSS和HTML，不清楚您想要做什么。

您可能还想查看这个：

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

- SScotti