根据javascript中的元素ID删除和添加加载类[重复]答案

【问题标题】：Remove and Add class on load based on element id in javascript [duplicate]根据javascript中的元素ID删除和添加加载类[重复]
【发布时间】：2015-07-13 15:20:26
【问题描述】：

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

我通过提取从两个隐藏输入字段及其 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>

【问题讨论】：

您需要使用jQuery方式$('id-of-element')选择元素才能使用removeClass()和jQuery提供的任何其他功能。
learn.jquery.com 和 try.jquery.com 是使用 jQuery 的绝佳介绍。
使用@Imgonzalves 提到的jQuery选择器方法，或使用classList.remove( ); .. developer.mozilla.org/en-US/docs/Web/API/Element/classList
@TheDizzle 您可能需要考虑发布一个新问题，而不是编辑这个问题。您的原始问题已被回答并接受，现在更改它可能会引起混淆。只是一个建议。如果您确实发布了新问题，请考虑回滚您的编辑以恢复您的原始问题。

标签： javascript jquery html

【解决方案1】：

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

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

选择具有给定 id 属性的单个元素。

使用

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

【讨论】：

非常感谢您提供的帮助。我什至没有注意到我没有使用 # 来引用 ID。完美答案！