jQuery: Changez l'image d'arrière-plan css au premier clic, puis revenez à l'image originale au prochain clic et ainsi de suite

Question

J'essaye de créer un formulaire de rétroaction qui permute les images à chaque clic.

La première image de retour montre "feedback +". Je veux que les utilisateurs cliquent dessus, le formulaire de feedback glisse, puis l'image montrera "feedback -". Je suis déjà arrivé à ce stade, mais je n'arrive pas à comprendre comment afficher "feedback +" lorsque les utilisateurs veulent réduire ou cliquer une seconde fois.

Voici le 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

Peut-être quelque chose comme ceci:

<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

Ajoutez juste une classe à votre élément qui change l'image de fond

$(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>