jQuery：最初のクリック時にCSSの背景画像を変更し、次のクリック時に元の画像に戻す

Question

クリックごとに画像を切り替えるフィードバックフォームを作成しようとしています。

最初のフィードバック画像は「フィードバック+」を示します。私はユーザーがこれをクリックして、フィードバックフォームが滑り落ちるようにして、画像に "feedback - "を表示します。私はすでにこれを持っていますが、ユーザーが2回目に最小化またはクリックしたいときに "フィードバック+"を表示する方法を理解することはできません。

ここではHTMLです：

<div class="slide-out-div"> 
    <a class="handle" href="#"></a> 
    <!-- feedback form goes here --> 
</div> 

はCSS：

.handle{ 
width:40px; 
height:141px; 
background-image:url(../images/feedback-plus.png);} 

のjQuery：

<script type="text/javascript">  
    $(function() { 
     $('.handle').click(function() { 
     $(this).css('background-image', 'url(images/feedback-minus.png)'); 
     }); 
    }) 
</script> 

Answer 1

はたぶん、このような何か：

<script type="text/javascript"> 
    $(function() { 
     var backgroundIsPlus = true; 

     $('.handle').click(function() { 
      if (backgroundIsPlus) { 
       $(this).css('background-image', 'url(images/feedback-minus.png)'); 
      } 
      else { 
       $(this).css('background-image', 'url(images/feedback-plus.png)'); 
      } 
      backgroundIsPlus = !backgroundIsPlus; 
     }); 
    }) 
</script> 

Answer 2

ただ、背景画像を変更し、あなたの要素にクラスを追加

$(document).ready(function(){ 
 
    $(function() { 
 
    $('.handle').click(function() { 
 
     $(this).toggleClass("feedback-minus"); 
 
    }); 
 
    }) 
 
});

.handle{ 
 
    width:40px; 
 
    height:141px; 
 
    background-image:url(../images/feedback-plus.png); 
 
    color: blue; 
 
} 
 
.handle.feedback-minus{ 
 
    background-image:url(../images/feedback-minus.png); 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class="slide-out-div"> 
 
    <a class="handle" href="#">Hello World</a> 
 
    <!-- feedback form goes here --> 
 
</div>