jQuery：在第一次单击时更改 css 背景图像，然后在下次单击时返回原始图像，依此类推答案

【问题标题】：jQuery: Change css background image on first click, then back to original image on next click and so forthjQuery：在第一次单击时更改 css 背景图像，然后在下次单击时返回原始图像，依此类推
【发布时间】：2017-01-16 13:33:24
【问题描述】：

我正在尝试创建一个滑出式反馈表单，在每次点击时切换图像。

第一个反馈图像显示“反馈+”。我希望用户点击这个，反馈表滑出，然后图像将显示“反馈-”。我已经做到了这一点，但不知道当用户想要最小化或再次点击它时如何让“反馈+”出现。

这是 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>

【问题讨论】：

标签： jquery slide out

【解决方案1】：

只需向您的元素添加一个更改背景图像的类

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

【讨论】：

【解决方案2】：

可能是这样的：

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

【讨论】：