jquery - iPhone で Jquery を使用して背景色を変更する際の遅延

Question

クリックするとリンクの背景色を変更する次のコードがあります。

function showSelectEffect(obj) {
        $(obj).css("background-color", "#d7d7d7");
            }

メソッドは、以下のようにリンクの onclick と呼ばれます

<a onclick="showSelectEffect(this);" href="test.html">sample text</a>

問題は、ハイライトが数秒遅れて発生し、クリックしてもすぐに発生しないことです。onmousedown イベントで showSelectEffect 関数を呼び出してみましたが、それでも同じです。パフォーマンスを向上させる方法を教えてください。

Answer 1

<a class="showSelectEffect" href="test.html">sample text1</a>
<a class="showSelectEffect" href="test.html">sample text2</a>
<a class="showSelectEffect" href="test.html">sample text3</a>
<a class="showSelectEffect" href="test.html">sample text4</a>​


$('.showSelectEffect').on('click',function(){
  event.preventDefault();
  $(this).css("background-color", "#d7d7d7");
});​

ここでデモをお試しください

少し高速になるjqueryを使用する代わりに、cssを試すことができます。

a:active {
   background-color:#d7d7d7; //this line should go in your stylesheet
}

JSコードとHTMLを分離してください。それは良い習慣です。

別のオプションは、以下のようにスタイルシートでcssクラスを定義することです。

a.showSelectEffectColor {
   background-color:#d7d7d7; //this line should go in your stylesheet
}

 $('.showSelectEffect').on('click',function(){
      event.preventDefault();
      $(this).addClass('showSelectEffectColor');
    });​

Answer 2

:activecss プロパティを使用しないのはなぜですか?

/* CSS */
a:active {
   background-color:#d7d7d7;
}

/* HTML */
<a href="test.html">test</a>

Answer 3

addClass機能も使用できます

.changeBackground{
   background-color:#d7d7d7;
}



$(body).addClass('changeBackground');