jquery - 使用 jquery.removeClass 后 Bootstrap 出现问题

Question

我在使用 twitter bootstrap 框架和 jQuery 时遇到以下问题: 我有以下表单(经过简化，真正的表单是使用 cakephp 的 formhelper 构建的，并且有更多的类和 id):

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="input01">Name</label>
    <div class="controls">
      <input type="text" class="input-xlarge" id="name">
      <span class="help-block">Supporting help text</span>
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="input01">Description</label>
    <div class="controls">
      <input type="text" class="input-xlarge" id="description">
      <span class="help-block">Supporting help text</span>
    </div>
</form>

服务器端验证后，我将 .error 类添加到相应的控制组中。

现在，例如，名称验证正常，但描述失败，描述控制组获取错误类并正确显示(红色，标准 Bootstrap )。但名称输入字段也是红色的。我检查了源代码，名称的控制组没有 .error 类。 让我困惑的是，只有输入字段显示有红色边框，相应的标签标记正确显示(默认颜色)。

这是一个屏幕截图，可以让您更清楚地理解。

在 Chrome 和 Firefox 中检查它，这样我就可以排除浏览器错误。我还在 Chrome 开发者工具中手动添加和删除了该类，并且它按预期工作。这是为什么？有人能解决这个问题吗？

Answer 1

form 位于另一个带有 .control-group-class(此处未显示)的 div 和 error-class 使用 jQuery 应用 .parents()搜索 .control-group ，它会一直向上遍历 DOM 树，并导致 .error 被应用于包含两个输入的 div字段。

删除封闭的 div 类解决了问题。这有点不公平，因为我可以获得完整的代码。 :(