jQuery addClass不动态应用样式

时间:2012-07-30 20:04:43

标签: jquery css code-injection addclass

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

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

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

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

4 个答案:

答案 0 :(得分:2)

此示例有效:

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

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

答案 1 :(得分:2)

你说没有应用样式,但是选择输入中添加了“select js-select”类吗?那么css或者浏览器一定有问题。

$(“select”)。addClass(..)应该有效,不需要您按ID或类指定。

答案 2 :(得分:0)

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

中一样

答案 3 :(得分:0)

添加到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>