jQuery的addClass方法无法动态应用样式

Question

我正试图在页面上动态应用样式到一些下拉列表。使用jQuery addClass确实将类添加到所有“Select”元素，我可以从Chrome控制台中看到这一点。然而，样式未应用于元素。 现在，如果我手动为每个选择元素单独添加类，然后保存页面并刷新它，样式就应用于该元素。 你有任何想法为什么使用jquery类注入时样式没有应用？

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

- Tony H.

---

你能在 jsFiddle 上发布一个示例吗？ - j08691

你能发一下 HTML 和 CSS 的示例吗？ - hradac

请发布一个 Fiddle。帮助我们帮助您！ - SexyBeast

Answer 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或类选择器。通过使用其中一个选择器，您的代码将知道应用样式的目标。否则，您的代码也可以正常工作。

祝好运，希望这能帮助到您。

- Chris

---

这是 jsfiddle，希望你们能帮我解决问题：链接。 - Tony H.

Answer 2

你说样式没有被应用，但是"select js-select"类是否添加到了选择输入框中？那么可能是CSS或浏览器出了问题。 $("select").addClass(..)应该可以工作，不需要指定ID或类。

- LazyTarget

---

你说得对，一旦我意识到他实际上是在针对选择元素。 - Chris

这个问题现在已经解决了。这是一个注入工作正常的示例。问题出在CSS和JavaScript包含上。当将它们作为资源添加到示例中时，它们无法正常工作，但是当将它们作为链接添加时，就可以正常工作了。示例：链接 - Tony H.

Answer 3

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

- LazyTarget

---

依然不起作用。应用的样式相当重要，而且非常明显。我注意到使用'onLoad'会注入类，但是样式没有被应用。然而，如果您手动将类放在选择元素中，样式就会被应用。 - Tony H.

现在它可以工作了，但在jsFiddle上不行。http://jsfiddle.net/gc3wQ/11/养成一个习惯，在下面包裹所有的jQuery代码： $(document).ready(function(){}); 参见：http://docs.jquery.com/Tutorials:Introducing_%24%28document%29.ready%28%29 - LazyTarget

你看到fiddle所应用的样式了吗？我还没有看到它们。请先手动添加样式，以了解我试图注入的样式。我正在将这些样式注入到我的页面上的一个动态表单中，因此理论上，如果我可以将样式注入到我在dom上创建的选择元素中，那么我也应该能够将样式注入到动态创建的元素上。 - Tony H.

在jsFiddle中更改了样式：链接。如果在您的实际代码中无法正常工作，请尝试使用$(document).ready(function(){ //code });。 - LazyTarget

Answer 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>

- Prakhar Thakur