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のCSSルールは変更されません。visibleState

をタップして、これらのルールに手動でアクセスできますdocument.styleSheets。

于 2012-10-22T13:47:37.360 に答える
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 に答える
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 に答える
0

jsを変更するだけで、インラインになります。

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

インラインスタイルは、ヘッドまたはスタイルシートのスタイルを上書きします。

show()とにかくそれが本当にすることのすべてです。表示プロパティのインラインスタイルの追加と削除を表示および非表示にします。おそらく、可視性のプロパティも、誰か？

于 2012-10-22T13:48:22.327 に答える