jQuery: изменить изображение css на первый клик, затем вернуться к исходному изображению при следующем щелчке и т. Д.

Question

Я пытаюсь создать форму обратной формы, которая переключает изображения при каждом нажатии.

Первое изображение обратной связи показывает «обратная связь +». Я хочу, чтобы пользователи нажимали на эту кнопку, форма обратной связи открывается, а на изображении будет отображаться «обратная связь». Я уже получил это далеко, но не могу понять, как получить обратную связь +, когда пользователи хотят свернуть или щелкнуть по нему второй раз.

Вот 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>