使用切换按钮更改背景图片（jQuery）

Question

How do i turn this into a toggle button? So that when the button is clicked, it toggles the light and dark background.

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

CSS

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

Thanks

Answer 1

Toggle a class instead of setting the background directly. It will be easier to maintain and to know what state the code is in.

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