jQuery addClass 不动态应用样式答案

【问题标题】：jQuery addClass does not apply style dynamicallyjQuery addClass 不动态应用样式
【发布时间】：2012-07-28 13:13:01
【问题描述】：

我正在尝试将样式动态应用于我页面中的几个下拉列表。使用 jQuery addClass 确实将类添加到所有“选择”元素，正如我可以从我的 Chrome 控制台看到的那样。但是，样式不适用于元素。

现在，如果我手动将类单独添加到每个选择元素，然后保存页面并刷新它，样式将应用于元素。

知道为什么样式不适用于 jquery 类注入吗？

$("select").addClass("select js-select");

【问题讨论】：

【解决方案1】：

这个例子有效：

<p><a href="#" id="clicker">Add Class</a></p>
<div id="select">Hello World</div>

javascript

$("#clicker").click(function () {

    $("#select").addClass("select js-select");
});

通过查看您的代码，似乎 $("select") 上应该有一个 ID 或类选择器。通过拥有其中一个选择器，您的代码将知道应用样式的目标。否则你的代码可以正常工作。

祝你好运，希望这会有所帮助。

【讨论】：

【解决方案2】：

您说没有应用样式，但是“select js-select”类是否添加到选择输入中？那么肯定是css或者浏览器有问题。

$("select").addClass(..) 应该可以工作，不需要您按 ID 或类指定。

【讨论】：

你是对的，一旦我意识到他实际上是针对 select 元素。
现在已解决。这是注射正常工作的小提琴。问题在于css和javascript包含。在小提琴中将它们添加为资源时它们无法正常工作，但是当将它们添加为链接时，它可以正常工作。小提琴：link

【解决方案3】：

如果您将 onDomReady 更改为 onLoad，则可以正常工作。如http://jsfiddle.net/gc3wQ/9/

【讨论】：

还是不行。应用的样式非常丰富，它们会非常引人注目。我看到使用“onLoad”正在注入类，但是没有应用样式。但是，如果您手动将类放入选择元素中，则会应用样式。
现在它可以工作了，但只是在 jsFiddle 中不行。 jsfiddle.net/gc3wQ/11 养成将所有 jQuery 代码包装在 a 中的习惯： $(document).ready(function(){ });另见：docs.jquery.com/…
您看到小提琴中应用的样式了吗？我仍然没有看到他们。请先手动添加样式，以了解我要注入的样式。我将这些样式注入到页面上的动态表单中，所以理论上如果我可以将样式注入到我在 dom 上创建的选择元素中，我也应该能够将样式注入到动态创建的元素中。
样式在jsFiddle中改变：link。试试 $(document).ready(function(){ //code });如果它在你的真实代码中不起作用。

【解决方案4】：

添加到 LazyTarget 的答案。

您尝试通过类添加的样式被可能已经存在于元素中的 CSS 覆盖。

例如，这不起作用（不会隐藏 div）

$(function (argument) {

  function loaded(){
    $('.landing .scroll').addClass('hidden');
  }

  loaded();

})

.hidden{
  display: none;
  transition: all ease-in-out 0.3s;
}

.shown{
  display: block;
  transition: all ease-in-out 0.3s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="shown">
 <h1>Hello</h1>
</div>

【讨论】：