2

mouseenter一部の要素でイベントを使用しmouseleaveて、外観を変更しています。次の2つの戦略のいずれかを使用して、そうすることができます。

  1. $(this).css('someProperty','someValue')追加して$(this).removeAttr('style')から削除する
  2. $(this).addClass('someClass')追加して$(this).removeClass('someClass')から削除する

そうするための最良の方法は何ですか？

4

7 に答える 7

4

間違いなくオプション 2. スタイルはスタイルシートで定義する必要があります。

クラスが存在toggleClassする場合は削除しますが、存在しない場合は追加します。

注: toggleClassブール値を 2 番目の引数として渡すこともできます。これにより、追加するか削除するかを指定できます (現在そのクラスが適用されているかどうかに関係なく)。

$(this).toggleClass('active', true);

は次とまったく同じです:

$(this).addClass('active');

これは、コードに既にブール値がある場合に非常に便利です。したがって、これの代わりに：

if (isUserActive()) {
    $(this).addClass('active');
} else {
    $(this).addClass('active');
}

これを行うことができます：

$(this).toggleClass('active', isUserActive());
于 2012-10-28T18:00:00.993 に答える
1

:hoverJavaScript で行う必要がある場合はオプション 2 ですが、最近のブラウザーでは、疑似クラスを使用して完全に CSS で目的を達成できる場合があります。

于 2012-10-28T18:01:47.593 に答える
0

最小限のjQueryでプロパティ全体を追加、削除、変更できるため、addClass()/を強くお勧めします。removeClass()

メソッドcss()では、プログラムによる相互作用を伝えるために美的変更を反映するために何を変更する必要があるかを追跡する必要がありますが、それをattr()メソッドと組み合わせてstyle属性を削除すると、必要なものも含めてすべてのスタイルが削除されます。これらのプロパティを再割り当てする必要があります。

したがって、基本的にはオプション 2 が効率的であり、オプション 1 は不要な作業を作成します。

もちろん、toggleClass()さらに効率を高めることができる常にあります。

于 2012-10-28T18:00:11.180 に答える
0

CSS プロパティ値のいずれかを動的に生成する必要がない限り、スタイルを JavaScript から分離することをお勧めします。そのため、直接の CSS スタイルの代わりにクラスを使用してください。

于 2012-10-28T18:00:33.723 に答える
0

.addClassCSSで.removeClassスタイルを変更できるため、これが最良の方法です。しばらくすると、サイトを簡単に再設計できます。

于 2012-10-28T18:01:07.810 に答える
0

通常、スタイルはさまざまな要素に共通であり、一般的であり、属性を1つずつ追加するよりも削除を追加する方が良いため、2番目が最適です。

$(this).addClass('someClass') to add and then $(this).removeClass('someClass') to remove
于 2012-10-28T18:02:23.740 に答える
0

この関数を複数の要素で呼び出す場合は、2 番目の要素を使用することをお勧めします。後で再度外観を変更する必要がある場合は、すべての要素ではなく、css クラス内でのみ編集する必要があります。

于 2012-10-28T18:06:25.283 に答える