带有引导程序的 jQuery addClass()

【问题标题】：jQuery addClass() with Bootstrap带有引导程序的 jQuery addClass()
【发布时间】：2011-12-22 11:04:34
【问题描述】：

我正在使用 Bootstrap 开发我的 php 平台。

当我尝试使用这个 javascript sn-p

if(result == "OK"){
    // If the result is OK applies some effects
    $("#signup" + item).removeClass("error");
    $("#signup" + item).addClass("success");
} else {
    // Applies some effects and shows the error
    $("#signup" + item).removeClass("success");
    $("#signup" + item).addClass("error");
}

使用此 html 代码

<input class="xlarge" id="signupUsername" name="signupUsername" size="30" type="text">

什么都没有发生。不应用“错误”或“成功”效果。

【问题讨论】：

你确定代码执行了吗？你是否包含了正确的 CSS？您是否定义了“错误”和“成功”CSS 类？ “项目”是否包含正确的值？ ...
正确包含 css，因为页面样式正确。错误和成功类在由 less 正确编译的 Bootstrap .less 文件中定义。

标签： jquery twitter-bootstrap

【解决方案1】：

error 和success 类不应应用于<input>，而应包含<div> 和clearfix 类：

<div class="clearfix error">
    <input id="errorInput" class="xlarge" type="text" size="30" name="errorInput"/>
</div>

<div class="clearfix success">
    <input id="successInput" class="xlarge" type="text" size="30" name="successInput"/>
</div>

尝试更改您的代码以向父 div.clearfix 添加/删除类，然后看看它是否有效。

HTML：

<div class="clearfix">
    <input class="xlarge" id="signupUsername" name="signupUsername" size="30" type="text">
</div>

JS：

var div = $("#signup" + item).parent("div.clearfix");
if(result == "OK"){
    div.removeClass("error");
    div.addClass("success");
} else {
    div.removeClass("success");
    div.addClass("error");
}

【讨论】：