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一起使用以选择此类元素。然后可以在jQuery元素集上使用addClass()和removeClass()来分别添加和删除传递的类。

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

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

Answer 3

这只是一个草案而且未经测试，但是你想要做的事情有一个逻辑。一旦找到逻辑，就可以在循环中使用它。像那样：

QNetworkReply * QNetworkAccessManager::get(const QNetworkRequest & request)

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吗？

您可以使用变量指定类型的'nth'：

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

虽然不确定这适用于i = 1的情况。你可能需要先在那里输入。

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

你可能也想看看这个：

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

如何缩短此JavaScript / jQuery代码

5 个答案: