0

クリックすると、別の要素のクラスをチェックする要素があります。

特定のクラスがある場合は、それを削除して別のクラスに置き換えます。繰り返しますが、クリックすると、スワップされたクラス名でそのプロセスが逆になります。

(ビジュアルを与えるために、クラスは素敵な星のアイコンで、影付きのバージョンです)

以下のコードは少し冗長すぎると思います。
誰でもそれを述べるためのより良い/短い方法を見ることができますか?

<script language="javascript" type="text/javascript">
$(document).ready(function(){


   $(".clickme").click(function(){ 

     if($("#staricon").hasClass("starON")){

         $("#staricon").removeClass("starON").addClass("starSHADED"); 

     }else if($("#staricon").hasClass("starSHADED")){

         $("#staricon").removeClass("starSHADED").addClass("starON");   
     }


  });

});
</script>

また、starONとstarSHADEDはスプライトの一部です。
上記のコードは機能します！しかし、私はそれが最適化できると確信しています。

jQuery には.toggleClass()API があるようですが、2 つのクラスを間違って交換しています。

4

2 に答える 2

2

まず、選択した要素を変数に設定します (jQuery を複数回操作する場合は、常に経験則として jQuery を使用することをお勧めします)。

次に、両方の状態のクラスが必要な特定の理由はありますか? デフォルトで影付きの星の画像を指定し、starON クラスがある場合はそれをオーバーライドします。その後、1toggleClassつですべての作業を行うことができます。

$('#staricon').toggleClass("starON");
于 2013-02-02T00:18:38.520 に答える
0 
$('#staricon').toggleClass('starSHADED').toggleClass('starON');
于 2013-02-02T00:15:04.170 に答える