javascript - 使用切换 (jQuery) 更改背景图像

Question

如何将其变成切换按钮？因此，当单击按钮时，它会切换浅色和深色背景。

$(document).ready(function(){
   $("button").click(function(){
       $(".content1").css("background-image", "url(../images/light.png)");  
   });
});

CSS

.content1 {
background-image: url('../images/dark.png');
}

谢谢

Answer 1

切换类而不是直接设置背景。这将更容易维护和了解代码处于什么状态。

$(document).ready(function() {
  $("button").click(function() {
    $(".content1").toggleClass("active");
  });
});

.content1 {
  background-image: url('../images/dark.png');
  background-color: red;
}
.content1.active {
  background-image: url('../images/light.png');
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Clicky</button>
<div class="content1"> Hello </div>