Javascript 更改元素的类别

我正在尝试改变循环中td元素的类，但是我没有一个真正有效的解决方案，请有人能帮助我，提前谢谢

HTML:

脚本：

 $.post(url, filteredObject, function (data) {
    for (i = 0; i < 7; i++) {
        $('#varperc' + (i + 1).toString()).text(numberWithCommas(data[i].varperc));

        var cls = parseInt($('#varperc' + (i + 1).toString()).text());

        if (cls < 0) {
            $('#varperc' + (i + 1).toString()).addClass("fa fa-level-down");
            $('#varperc' + (i + 1).toString()).removeClass("fa-level-up");
            $('.text-primary').removeClass('primary');
            $('.text-').addClass('warning');
        }
        else {
            $('#varperc' + (i + 1).toString()).addClass("fa fa-level-up");
            $('#varperc' + (i + 1).toString()).removeClass("fa-level-down");
            $('.text-primary').removeClass('primary');
            $('.text-').addClass('navy');
        }
    }
});

你有

$('.text-primary').removeClass('primary')

我想你想要

$('.text-primary').removeClass('text-primary')

您可以添加不同的类，而不是使用

$('.text-primary').removeClass('text-primary').addClass('navy')

然后,

$('.text-').addClass('navy');

已经过时了，我觉得它以前也没用过

---

请参阅文档。

根据您的评论，您希望更改.text主类I，假设您希望将其更改为“text navy”或“text warning”。在这种情况下，更改：

 $('.text-primary').removeClass('primary');
 $('.text-').addClass('navy');

致：

---

这是因为没有类primary，css类不是这样工作的，您只需要将.text primary变成.text navy，然后您应该删除.text primary并添加.text navy类。或者，您可以将系统更改为使用这些类

<>你可以考虑使用上面的代码：

 var $varperc = $('#varperc' + (i + 1).toString());

 $varperc
    .closest('.text-primary')
    .removeClass('text-primary')
    .addClass('text-navy');

---

我认为实现这一点的更好的动态方法是使用$。jquery的每个循环

试一试

你的html

<table>
    <tr>
    <td class="text-primary"> <i class="" id="varperc1"></i></td>
    <td class="text-primary"> <i class="" id="varperc2"></i></td>
    <td class="text-primary"> <i class="" id="varperc3"></i></td>
    <td class="text-primary"> <i class="" id="varperc4"></i></td>
    <td class="text-primary"> <i class="" id="varperc5"></i></td>
    <td class="text-primary"> <i class="" id="varperc6"></i></td>
    <td class="text-primary"> <i class="" id="varperc7"></i></td>
</tr>

</table>

和js

$.each($('table tr td'),function(i,j){
    $(this).find('i[id*=varperc]').text(numberWithCommas(data[i].varperc));

        var cls = parseInt($(this).find('i[id*=varperc]').text('test'+i));

        if (cls < 0) {
            $(this).find('i[id*=varperc]').addClass("fa fa-level-down");
            $(this).find('i[id*=varperc]').removeClass("fa-level-up");
            $(this).removeClass('text-primary');
            $(this).addClass('warning');
        }
        else {
            $(this).find('i[id*=varperc]').addClass("fa fa-level-up");
            $(this).find('i[id*=varperc]').removeClass("fa-level-down");
            $(this).removeClass('text-primary');
            $(this).addClass('navy');
        }
});

---

什么不起作用？文本主类没有改变…可能改变$'.text primary.removeClass'primary'；到$'.text primary'。删除类'text-primary'；使用$.each迭代检查我的答案的详细信息，但是该类将是空的..我如何为它分配一个新类？我扩展了答案

<table>
    <tr>
    <td class="text-primary"> <i class="" id="varperc1"></i></td>
    <td class="text-primary"> <i class="" id="varperc2"></i></td>
    <td class="text-primary"> <i class="" id="varperc3"></i></td>
    <td class="text-primary"> <i class="" id="varperc4"></i></td>
    <td class="text-primary"> <i class="" id="varperc5"></i></td>
    <td class="text-primary"> <i class="" id="varperc6"></i></td>
    <td class="text-primary"> <i class="" id="varperc7"></i></td>
</tr>

</table>

$.each($('table tr td'),function(i,j){
    $(this).find('i[id*=varperc]').text(numberWithCommas(data[i].varperc));

        var cls = parseInt($(this).find('i[id*=varperc]').text('test'+i));

        if (cls < 0) {
            $(this).find('i[id*=varperc]').addClass("fa fa-level-down");
            $(this).find('i[id*=varperc]').removeClass("fa-level-up");
            $(this).removeClass('text-primary');
            $(this).addClass('warning');
        }
        else {
            $(this).find('i[id*=varperc]').addClass("fa fa-level-up");
            $(this).find('i[id*=varperc]').removeClass("fa-level-down");
            $(this).removeClass('text-primary');
            $(this).addClass('navy');
        }
});