按下按钮更改图像

Question

我有这段代码可以更改我网站上的多个图像。 现在我可以更改图像一次，但我无法将它们更改回原始图像。 我试图在 my.css 之后使用 .toggle 来改变图像，但没有奏效。 我将如何解决这个问题？

  $("button").click(function(){
      $("#secriuty").css({"background-image": "url('images/certificates/secriuty-fundamentals-certificate.png')"}), 
      $("#js").css({"background-image": "url('images/certificates/js-certificate.png')"}),
      $("#html5").css({"background-image": "url('images/certificates/html5-certificate.png')"}),
      $("#html-css").css({"background-image": "url('images/certificates/html-and-css-certificate.png')"}),
      $("#photoshop").css({"background-image": "url('images/certificates/photoshop-certificate.png')"}),
      $("#illustrator").css({"background-image": "url('images/certificates/illustrator-certificate.png')"})
    });

Answer 1

尝试这个：

 $('.checkbox').click(function() { const button = $(this).parent('#button'); if( $(button).find('.checkbox').is(':checked') ) { $("#aaa").css({"background-image": "url('https://picsum.photos/id/141/150/150')"}) $("#bbb").css({"background-image": "url('https://picsum.photos/id/222/150/150')"}) $("#ccc").css({"background-image": "url('https://picsum.photos/id/27/150/150')"}) } else { $(".div").css({"background-image": ""}) } })

 .gallery { display: flex; flex-direction: row; } #aaa { display: block; width: 150px; height: 150px; background-image: url('https://picsum.photos/id/121/150/150'); } #bbb { display: block; width: 150px; height: 150px; background-image: url('https://picsum.photos/id/121/150/150'); } #ccc { display: block; width: 150px; height: 150px; background-image: url('https://picsum.photos/id/121/150/150'); }.div { margin-right: 5px; }.div:last-of-type { margin-right: 0; } /* Button */.btn { width: 150px; height: 40px; margin-top: 10px; background-color: #999; display: flex; align-items: center; justify-content: center; }.btn:hover { background: #444; color: #fff; }.btn.checkbox { position: absolute; left: 0; right: 0; width: 150px; height: 40px; opacity: 0; z-index: 999; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="gallery"> <div id="aaa" class="div"></div> <div id="bbb" class="div"></div> <div id="ccc" class="div"></div> </div> <div id="button" class="btn"> <input type="checkbox" class="checkbox" /> <span>Change Background</span> </div>

Answer 2

使用.toggleClass ：

 $("button").click(function(){ $("#security").toggleClass("newpic"); });

 #security { height: 100px; width: 100px; background: red; } #security.newpic { background: url("http://www.fillmurray.com/300/253"); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="security"></div> <button>Click me</button>