javascript - 根据 javascript 中的元素 id 在加载时删除和添加类

Question

这个问题已经有答案了:

Undefined is not a function (jQuery add/remove class) (3 个回答)

已关闭 8 年前。

当我选择两个按钮时，页面会重新加载，并且有两个值被分配给变量。我正在尝试对其进行设置，以便在页面加载时删除一个类，并根据两个变量的值添加一个类。

我通过提取从两个隐藏输入字段及其 ID 传递的值来获取变量

<input id="noType" name="noType" type="hidden" value="1" />
<input id="noAssign" name="noAssign" type="hidden" value="0" />

我在加载时获取它们的值。然后我有 id type1 type2 type3 的按钮我从中添加和删除类。

$(document).ready(function () {
    var type = document.getElementById("noType").value;
    var assign = document.getElementById("noAssign").value;
    $("type" + type).removeClass("btn-xxx")
           .addClass("btn-success");
    $("assigned" + assign).removeClass("btn-xxx")
           .addClass("btn-success");

});

我几乎 100% 确定我从 getElementById 中获取了正确的 id从隐藏的输入中获取并在尝试引用按钮的 id 时正确附加使用它们。不会添加或删除这些类。我错过了什么？

这些是按钮

<button id="type1" class="btn-t btn-xxx type-button" 
onclick="SetType(1);"><i class="fa fa-info-circle fa-fw">
</i>Invitation</button><button id="type2" class="btn-t btn-xxx type-button" 
onclick="SetType(2);"><i class="fa fa-info-circle fa-fw">
</i>Assistance</button><button id="type3" class="btn-t btn-xxx type-button" 
onclick="SetType(3);">
<i class="fa fa-info-circle fa-fw">
</i>Finalize</button>

Answer 1

因为 removeClass() 和 addClass() 是 jQuery 函数。

错误是正确的，因为 document.getElementById("type"+ type) 返回 DOM 元素，并且它们没有上述方法。可以使用 ID Selector (“#id”) 执行相同的操作

Selects a single element with the given id attribute.

使用

$("#type" + type).removeClass("btn-xxx").addClass("btn-success");
$("#assigned" + assign).removeClass("btn-xxx").addClass("btn-success");