0

如何使用 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/

4

6 回答 6

3

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

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

于 2012-10-22T13:47:37.360 回答
1

最简单的方法可能是拥有一个包含父级，您可以从中添加和删除一个类。例如：

.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/

于 2012-10-22T13:51:35.933 回答
1

您可以在调用 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>');
于 2012-10-22T14:02:27.133 回答
1

我尽量避免使用 .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 元素。

于 2012-10-22T13:47:36.027 回答
1

看这个：

<!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>
于 2012-10-22T13:49:57.370 回答
0

只需更改js，因此它是内联的。

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

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

无论如何，这就是全部show()。显示和隐藏为显示属性添加和删除内联样式。也许还有可见性属性，有人吗？

于 2012-10-22T13:48:22.327 回答