0

次のコードを記述するより良い方法はありますか?

私は Aloha Editor を使用しており、私の jQuery では、編集可能なクラスを持つ要素はマウスオーバーで 3 ピクセルの破線の境界線を取得します。以下のコードは正常に動作しています。 " このコードを書くには:

 $(function(){
  $('[class^="editable"]').mouseover(function(){
      $(this).css('border','3px dashed #a7a7a7');
  });
  $('[class^="editable"]').mouseout(function(){
      $(this).css('border','0px dashed #ffffff');
  });
});
4

4 に答える 4

3

$()メソッドを連鎖させて、同じセレクターで 2 回呼び出すことを避けます。

$('[class^="editable"]').mouseover(function(){
  $(this).css('border','3px dashed #a7a7a7');
}).mouseout(function(){
  $(this).css('border','0px dashed #ffffff');
});

特定の CSS を追加するのではなく、これらの設定をスタイルシートにクラスとして追加し、クラスを追加および削除します。

$('[class^="editable"]').mouseover(function(){
  $(this).addClass('hovered');
}).mouseout(function(){
  $(this).removeClass('hovered');
});

（...要素のデフォルトのスタイルは、マウスアウトで設定したものに従って定義されます。）

于 2013-08-27T10:55:37.783 に答える
1

それを行うための最良の方法は CSS です。スタイリングとスクリプトの分離に関してより高速で一貫性があり、js がリソースを消費しているためです。ただし、IE6 以下をサポートする必要がある場合は、:hover を使用できません:) 

.editable
{
   border: 0px dashed #fff;
}

.editable:hover
{
   border: 3px dashed #a7a7a7;
}
于 2013-08-27T11:05:55.893 に答える