4

編集:質問は、大規模な CSS 変更を 700 以上の div に最適化する方法に変わりました。私の元のアプローチを説明するために、古い質問を以下に残します。

次の jQuery がありますが、期待どおりに動作しません。クラス gr には約 700 の div があるため、それらを非表示にするにはかなりの時間がかかります。私はやろうとしています:

  1. 「発音の表示/非表示」をクリックすると、すぐにそのテキストを「Working」に変更します
  2. すべての「div.gr」が非表示/表示されるまで待ちます

  3. 「ワーキング」は「発音の表示/非表示」に戻ります

    $(document).ready(function () {
 $('#togglePron').click(function() {
   $('#togglePron').html("Working...");
   $('div.gr').toggle();
   $('#togglePron').html("Show/hide Pronunciation");
  });
});
...
... 
<div class="pronlink" id="togglePron">Show/hide P</div>

<div class="gr">hai</div><div class="zi">A</div>
<div class="gr">nao</div><div class="zi">B</div>  
etc.

Mike Lentiniのおかげで、この質問には jsfiddle があります。

これは私が取り組んでいる完全なページです

私が観察した動作は、「P の表示/非表示」が変更されるのにかなりの時間がかかり、その後「作業中」に短時間変更され、「表示/非表示」に戻ることです。jQuery は最初に html() を実行するのではなく、html() と .toggle() の両方を束ねているのでしょうか?

Operaでは私が望むことを行うので、これはブラウザ固有のようです。IE 7 と Chrome 18 では、動作は説明したとおりです。Chrome で必要な動作を実現する方法はありますか? または、私が説明していることを行うより良い方法はありますか?

4

6 に答える 6

6

編集 ：

トグル関数を使用してイベントをバインドするのではなく、すべての要素でクラスを交換してみませんか? これははるかに高速です。

$(document).ready(function(){
  $('#toggleP').click(function(){
    $('.gr').toggleClass('hidden');
  });
});

次に、CSS に次のスタイルを追加します。

.hidden { display: none !important; }

例については、このフィドルを参照してください。

追加の編集：

kingjeffreyが指摘したように、子要素の代わりに親要素をクラス交換するとさらに効率的です。

JS:
$('#togglePron').click(function(){
  $('table').toggleClass('hide-pron');
});

CSS:
table.hide-pron .gr { display: none !important; }

(比較的) 少数の子の場合、これらのアプローチの違いは無視できますが、子の数が増えると、親クラスのスワップが著しく速くなる可能性があります。

元の答え：

click()関数が戻るまで、要素は更新されません。これを行う1 つの方法 (おそらく最善の方法ではない) を次に示します。

$(document).ready(function () {
  $('#toggleP').click(function() {
    $('#toggleP').html("Working...");
    setTimeout(
      "$('div.g').toggle(10,function(){$('#toggleP').html('Show/Hide P');});",
      10)
  });
});

はtoggle()、 を介して 10 ミリ秒後に「スケジュール」されるため、非同期になりましたsetTimeout()。これは、click()関数がtoggle()完了するのを待たずに、ほとんどすぐに戻ることができることを意味します。

他の人が指摘したように、最良のオプションはおそらくすべてのdivs を親でラップし (これが実際のコードで実行可能な場合)、その親をトグルすることdivです。

JSFiddle リンク: http://jsfiddle.net/5E45Q/

于 2012-04-09T21:07:53.667 に答える
3

すべての を親要素にグループ化できればdiv.g、DOM を 700 回変更することなく、その単一の親要素を非表示にすることができます。http://jsfiddle.net/SVf5k/6/を参照してください

ただし、それが避けられない場合は、を切り替える前に短い遅延を追加できますdiv.g。これにより、js エンジンが の html を変更する機会が与えられ#togglePます。http://jsfiddle.net/SVf5k/5/を参照

于 2012-04-09T21:17:40.120 に答える
2

編集：私の最初の回答は、「Working ...」が一瞬だけ表示され、しばらくすると効果が表示されなかった理由についての混乱に対処することを目的としていtoggle()ました。あなたが構築しているWebサイトを実際に見ると、あなたの本当の関心事は単にこのUIの更新を高速化することであることがわかります.そこに大きなパフォーマンスの違いがあります）。

短い答え: あなたが望むのは非同期イテレータだと思います。これは他のプロジェクトで手巻きで見たことがありますが、不思議なことに、オープンソース ライブラリで見たことはないと思います (存在しないという意味ではありません- -私はそれを見たことがないだけです）。

このようなもの。

ここで、期待どおりに動作することがわかります(私はそう思います)。

さて、説明のために：

jQuery は最初に html() を実行するのではなく、html() と .toggle() の両方を束ねているのでしょうか?

jQuery ではないと思います。ブラウザのレンダリング エンジンがイベント ループから UI の更新を処理する方法に関して、ブラウザに依存する動作だと思います。多くの UI 実装は、UI 要素を瞬時に更新するのではなく、処理されるすべてのイベントの間にのみ更新することを知っています。

ブラウザーに関して、私の一般的な見解 (私はこれについてはあまり詳しくありません。実際のブラウザーの貢献者と話をする必要があります) は、一部のUI 更新はすぐに行われ、一部はすべての完全な更新を除いて目に見える効果がないということです。イベントループを通過します。したがって、jQuery がフードの下で行っていることはすべてtoggle()、後者の傘の下にあるように思えます。

于 2012-04-10T14:54:36.517 に答える
1

1 つの方法は、JavaScript を使用して (要素ごとではなく) CSS スタイルを直接動的に変更することです。

あなたのページでは、それぞれのすべてのテキスト div にWITH <td>a inline があります。まず、 をスタイル シートに移動します (できれば最初の位置に)。class='gr'style="display:block;"display:block;

このSOの回答（およびこのページ、このSOの回答も）を使用して、興味のあるスタイルシートが得られるまで各スタイルシートを調べます（にタイトルを追加する<css />と、これを簡単に行うことができます）。表示ブロックを削除します ( stylesheet.deleteRule(<index>).css の最初に置くため、単純なインデックスはゼロになります)。新しい を追加しdisplay:none;ます。

これにより、ページの css 全体が基本的に変更され、JQuery を使用する必要があるため、要素ごとに個別に変更されます。

おそらく最も一般的なソリューションではないかもしれませんが、現在のデザインを維持し（情報を複製せずに）、cssを使用して（「動的」に）行うことを想定しています。

フォローアップ: "Totally Pwn CSS with Javascript" を 見つけてください。あなたの状況で私がすることを正確に行います（後世のためにここに追加したかった:)）

余談ですが、このようなことを簡単に行えるようにするには、誰かが JQuery に機能要求を行う必要があります。:)

フォローアップ 2: 他の誰かが私より前に解決策を投稿していることに気付きました

これを行う別の方法は、「gr」クラスを削除して別の「grHide」クラスを追加することです。このフィドルをチェックして、私が何を意味するかを確認してください。

上で述べたように、インラインdisplay:block;を .gr クラスの下の css スタイルシートに移動します。.gr が行うすべてのことを行う別のクラスを追加しますが、display:none;代わりに a を行います。

これにより、jquery を使用できるようになり、それでも非常に高速になります。フィドルはとにかく速いです。

于 2012-04-10T11:40:37.677 に答える
0

jQuery ドキュメントを見ると、コールバックがあることがわかりtoggle()ますが、コールバックが必要な場合は期間も指定する必要があります。したがって、コードは次のようになります。

$(document).ready(function () {
  $('#toggleP').click(function() {
    $('#toggleP').html("Working...");
    $('div.g').toggle(500, function() {
      $('#toggleP').html("Show/hide P");
    });
  });
});
...
... 
<div class="plink" id="toggleP">Show/hide P</div>

0.5 秒が適切な時間である場合。詳細はこちら: http://api.jquery.com/toggle/

編集: クイック jsfiddle: http://jsfiddle.net/SVf5k/

于 2012-04-04T23:31:27.190 に答える
0

$.ajax()ここでフィドルを使用： http://jsfiddle.net/SVf5k/10/

$(function () {
    $('#toggleP').click(function() {
       $(this).html("...Working...");

        $.ajax({
           success: function(){
              $('div.g').toggle(500, function() {
                     $('#toggleP').html("Show/hide P");
              });
          }
      })
  });
});
​
于 2012-04-10T14:59:31.480 に答える