Question

我正在尝试创建一个幻灯片反馈表单，用于在每次点击时切换图像。

第一个反馈图像显示＆＃34;反馈+＆＃34;。我希望用户点击此处，反馈表单滑出，然后图像将显示＆＃34;反馈 - ＆＃34; 。我已经做到了这一点，但无法弄清楚如何获得反馈+＆＃34;当用户想要最小化或再次点击它时出现。

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

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

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

2 个答案: