javascript - クリック時にアンカータグの背景を切り替える

Question

div には、アンカー タグがあります。そのアンカー タグには、CSS を使用して割り当てられた背景画像があります。

ユーザーがクリックするとJavaScriptが実行されますが、背景画像を別の画像に変更したいのですが、もう一度クリックすると背景画像が元に戻ります。

これを行う方法（JQuery、CSS;よくわかりません）についてのヘルプをいただければ幸いです。

前もって感謝します。

Answer 1

toggleClass を使用して背景画像を変更できます。

$('#div1').click(function(){
    $(this).toggleClass('class2');
});
​

ライブデモ

Answer 2

状態変更前のアンカーのプロパティを変数に保存します。data次に、その変数をオブジェクトの に追加します。ここから、リンクにクラスを追加して、提供する必要があるシナリオをテストできます。この例では、色とbackground-colorプロパティを使用しました。これは、ニーズに合わせて非常に簡単に変更できます。

これが私の例の動作中のjsFiddleです

ここにHTML構造があります - >

<div>
  <a href="#" style="background-color:blue;">
    Click To Change
  </a>
</div>

ここにjQueryがあります->

$('a').click(function(){
  if($(this).hasClass('clicked')){
    $(this).css('background-color', $(this).data('oldbg'));
    $(this).removeClass('clicked');
  }else{
    $(this).addClass('clicked');  

    var oldBG = $(this).css('background-color');
    //the above stores the original css properties to a variable 'oldBG'

    $(this).data('oldbg', oldBG);
    //set the data of this object to the properties of the initial background.
    $(this).css('background-color', 'red');  
  }
});