为什么 addClass 只作用于一个元素而不作用于另一个？答案

【问题标题】：Why does addClass work on one element but not another?为什么 addClass 只作用于一个元素而不作用于另一个？
【发布时间】：2012-07-23 01:13:05
【问题描述】：

“open”类被添加到 ul 元素，而不是 dropdown#register 元素。

<ul class="nav"></ul>
<script> $("#register_dropdown").addClass("open"); </script>
<script> $("ul").addClass("open"); </script>
<span class="dropdown" id="register_dropdown"></span>

【问题讨论】：

您有 ID 为 #register_dropdown 的元素吗？不是dropdown#register
是的，看最后一行代码。
也许将您的脚本调用移动到您正在创建#register_dropdown 的下方？一些呈现的 HTML 也会比 HAML 更有用。
如果是haml，请标记为haml。
如果你最终得到$("ul").addClass("open");，你就有问题了（查看全局ul 选择器？）。

标签： jquery haml

【解决方案1】：

$("#register_dropdown") 返回一个空的 jQuery 对象，因为当您执行该行时，DOM 中不存在register_dropdown。

我没有使用 HAML 的经验，但是将脚本封装在 DOM ready handler 中是可行的方法：

%script $(function(){ $("#register_dropdown").addClass("open"); });

在普通标记中，它应该呈现为：

<script> $(function(){ $("#register_dropdown").addClass("open"); }); </script>

如果您愿意，也可以使用更详细的方式（结果与上述相同）：

$(document).ready(function() {
    //DOM is ready, put your code here
    $("#register_dropdown").addClass("open");
});

这会阻止您的代码在 DOM 完全加载之前运行。您也可以在将元素添加到 DOM 后移动该行，但最好在 DOM 准备好后对其进行操作。

Reference

【讨论】：