Question

如何使用jQuery更改css，以便它对未来的元素也有效？我有一个问题，我使用$（）。show（）来切换某些元素的显示，但随后我添加了同一个类的新元素，它们仍然是隐藏的。

<style type="text/css">
  .visibleState { display: none; }
</style>
<script>
  $('.visibleState').show();
  $('#appendHere').html('<div id="second" class="visibleState">* Second is NOT? visible</div>');
</script>

可能有人问过，但我找不到它。我尝试以不同的方式使用live（），但这似乎不起作用。什么是正确的方法？

示例：http://jsfiddle.net/amorris/wykhv/

Answer 1

这不是live的工作原理。 $('.visibleState').show();会找到visibleState类的所有（当前存在的）元素，并显示它们。它不会改变visibleState样式本身的CSS规则。

您可以通过点按document.styleSheets手动访问这些规则。

Answer 2

除了非常简单的情况外，我尽量避免使用.show（）和.hide（）。相反，使用具有默认和其他所需行为的类。所以你有你的.visibleState类，和.visibleState.show {display：block; }

<style type="text/css">
  .visibleState { display: none; /* default hidden */ }
  .visibleState.show { display: block; }
</style>
<script>
  $('.visibleState').addClass('show');
  $('#appendHere').html('<div id="second" class="visibleState show">Second is NOW visible</div>');
</script>

虽然我将'visibleState'类更改为更符合语义的类，例如'defaultState'。

现在你的方式不起作用，因为.show（）的函数调用尚未应用于你的#second元素。

Answer 3

看看这个：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
.classname {
 color: red;
 font-size: 14px;
}
</style>
<script type="text/javascript">
window.onload = function() {
    document.getElementById("button").onclick = function() {
        var ss = document.styleSheets;

        for (var i=0; i<ss.length; i++) {
            var rules = ss[i].cssRules || ss[i].rules;

            for (var j=0; j<rules.length; j++) {
                if (rules[j].selectorText === ".classname") {
                    rules[j].style.color = "green";
                }
            }
        }
    };
}
</script>
</head>
<body>

<h1 class="classname">Some red text</h1>

<button id="button">Make text green</button>

</body>
</html>

Answer 4

最简单的方法可能是添加一个包含父项并从中删除一个类。例如：

.shown .child{
    display: block;
}

.hidden .child{
    display:none;
}

<div id="parent" class="hidden">
    <div class="child"></div>
</div>

$("#parent").removeClass("hidden").addClass("shown")
    .append("<div class='child'>this will now be shown</div>");

可以使用任意数量的不同css规则来代替显示和隐藏。

工作示例：http://jsfiddle.net/xJ2Gh/

Answer 5

您可以定义一些标志并在调用show事件时更改其值：

var fired = false;
$('.visibleState').show(function(){
    fired = true;
});

之后，当您确定show事件已完成时，您可以根据此标志状态设置新创建元素的可见性：

$('#appendHere').html('<div id="second" class= "visibleState"' + (fired ? " style=\"display: block\"" : "") + ') >* Second is visible</div>');

Answer 6

只需更改js，所以它是内联的。

  $('#appendHere').html('<div id="second" class="visibleState" style="display: block;">* Second is NOT? visible</div>');

内联样式会覆盖头部或样式表中的样式。

这就是show()真正做到的一切。显示和隐藏为显示属性添加和删除内联样式。也许是visibililty财产，任何人？

jQuery hide / show class不会改变css以供将来添加的元素使用

6 个答案: