javascript单击(功能)更改颜色按钮

时间:2022-02-14 08:44:21
$(document).ready(function() {
    $('.tests').click(function() {
        $(this).css('background-color', '#FFBF38');
    });
});

This code works ok, but when I click other button (.tests), I want to back to color was previously. how to do it? Thanks!

这段代码工作正常,但是当我点击其他按钮(.test)时,我想回到以前的颜色。怎么做?谢谢!

4 个解决方案

#1


$(document).ready(function() {
    $('.tests').click(function() {
        $(".tests").css('background-color', "YOUR PREVIOUS COLOR");
        $(this).css('background-color', '#FFBF38');
    });
});

#2


var startColor = "yourStartColor";

$(document).ready(function()
{
  $('.tests').click(function()
   {
   if($(this).css('background-color') == "#FFBF38")
      $(this).css('background-color', startColor);
   else
      $(this).css('background-color', "#FFBF38");
  });
});

#3


you need to use toggleClass("");
HTML

你需要使用toggleClass(“”); HTML

<div class="place"></div>  

CSS

.place { 
    width: 50px; 
    height: 50px; 
    background-color: #336699; 
}
.green{
    background-color: black;
}  

Script

$(".place").click(function () {
   $(this).toggleClass("green");
});

Demo

#4


Try this,

 $('.tests').click(function() {
       $('.tests').css('background-color', 'your_old_color'); 
       $(this).css('background-color', '#FFBF38');
});

#1


$(document).ready(function() {
    $('.tests').click(function() {
        $(".tests").css('background-color', "YOUR PREVIOUS COLOR");
        $(this).css('background-color', '#FFBF38');
    });
});

#2


var startColor = "yourStartColor";

$(document).ready(function()
{
  $('.tests').click(function()
   {
   if($(this).css('background-color') == "#FFBF38")
      $(this).css('background-color', startColor);
   else
      $(this).css('background-color', "#FFBF38");
  });
});

#3


you need to use toggleClass("");
HTML

你需要使用toggleClass(“”); HTML

<div class="place"></div>  

CSS

.place { 
    width: 50px; 
    height: 50px; 
    background-color: #336699; 
}
.green{
    background-color: black;
}  

Script

$(".place").click(function () {
   $(this).toggleClass("green");
});

Demo

#4


Try this,

 $('.tests').click(function() {
       $('.tests').css('background-color', 'your_old_color'); 
       $(this).css('background-color', '#FFBF38');
});