1

「クイック」と「フル」の見積もりの​​間で切り替えられる特定の要素を持つ、かなり長い（〜100フィールド）フォームがあります。これにより、75個のフィールドが非表示から表示に切り替わります。現在、私はいくつかの単純なjQueryを介してこれを行います：

jQuery('.full_quote').show();
jQuery('.quick_quote').hide();

これは、CSSを使用して別の方法で実行できることに気付きました。

## Javascript:
  jQuery('#quote_form').toggleClass("full_quote quick_quote");

## CSS:
  form.toggle-form.full_quote .quick_quote {display: none;}
  form.toggle-form.quick_quote .full_quote {display: none;}

したがって、質問の大部分は、 パフォーマンスが懸念される場合にどちらを使用するのが良いかということです。

私の最初の考えは、jQueryで結果を反復処理するオーバーヘッドは、CSSよりも時間がかかるということです。ただし、これをテストする方法がないので、コミュニティの経験に興味があります。

4

2 に答える 2

1

show新しいカスタムクラスを定義したり、jQueryとメソッドを使用したりするのではなく、hide実際には3番目のオプションをお勧めします。

非表示にする必要がある要素に属性を追加し、[hidden]表示する必要があるときに属性を削除します。

JS： 
$('.foo').attr('hidden', true);

これがクロスブラウザでサポートされていることを確認するには、CSSを少し追加する必要があります。

CSS： 
[hidden] {
    display: none !important;
    visibility: hidden !important;
}

これにより、「非表示」要素のスタイル設定方法をオーバーライドすることもできます。これは、デバッグに役立ちます。

要素を表示する場合は、[hidden]属性を削除するだけです。

JS： 
$('.foo').attr('hidden', false);

jQueryを実装showしhideて利用するとよいでしょう。代わりに、開発者は、スタイルをインラインで追加するときにスタイルシート宣言をオーバーライドするため[hidden]、使用するときに注意する必要があります。showdisplaydisplay

于 2013-01-10T20:41:05.873 に答える
0

どちらも本質的に同じです。JQueryは、内部的に非常によく似た同じロジックを実行します。（jqueryのshow / hidden関数はどのように機能しますか？を参照してください）。そしてそれはあなたのCSSapprachがjavascriptをまったく使用しないようではありません（その場合、それはより良いオプションでしょう）

それで、

jQuery('.full_quote').show();
jQuery('.quick_quote').hide();

理にかなっています（とにかくJQueryを使用しているので、そのすべての関数を使用しないのはなぜですか）。

于 2013-01-10T20:26:55.180 に答える