使用切换（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

切换课程而不是直接设置背景。维护和了解代码所处的状态将更容易。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;