Javascript 单击按钮更改背景色

我想改变按钮“游戏添加”的背景色时，按钮被点击。当在叠加中点击“X”时，我想把它改回以前的颜色。这是我的密码

$（'.game add'）。单击（函数（）{
$（“.game add”）.css（“背景色”、“5da93c”）；
$（'#overlay'）。toggleClass（'active'）；
//计算按钮底部
var bottom=$（this.position（）.top+$（this.outerHeight）（true）；
$（'#overlay'）.css({
“顶部”：底部+“px”，
});
});
$（“#关闭”）。单击（函数（）{
$（“.game add”）.css（“背景色”、“1d”）；
$（'#overlay'）。removeClass（'active'）；
});

添加游戏
这是一个覆盖图
您忘记了之前十六进制值的
#
。换行后

$(".game-add").css("background-color","5da93c");
$(".game-add").css("background-color","1D1D1D");

到

给我一个结果，当点击
按钮时，颜色会发生变化，并且
a
您忘记了
#
散列/numbersign，因此颜色无法识别

 // Code above
 $('.game-add').click(function() {
  $(this).css("background-color","#5da93c");
  $('#overlay').toggleClass('active');
 // The rest of the code

正如在另一个答案中所提到的，您可以使用
此
代替重复slector
。游戏添加
——但这并不是问题的解决方法

您忘记了在css中以十六进制颜色出现的
#
符号


$（'.game add'）。单击（函数（）{
$（this.css（“背景色”，“#5da93c”）；
$（'#overlay'）。toggleClass（'active'）；
//计算按钮底部
var bottom=$（this.position（）.top+$（this.outerHeight）（true）；
$（'#overlay'）.css({
“顶部”：底部+“px”，
});
});
$（“#关闭”）。单击（函数（）{
$（“.game add”）.css（“背景色”，“#1d”）；
$（'#overlay'）。removeClass（'active'）；
});

添加游戏
这是一个覆盖图
添加了一些更改

 $("#close").css("background-color","#d1a0a0"); 
 // needed the `#` infront of color

及

到


$（'.game add'）。单击（函数（）{
$（“.game add”）.css（“背景色”、“5da93c”）；
$（'#overlay'）。toggleClass（'active'）；
//计算按钮底部
var bottom=$（this.position（）.top+$（this.outerHeight）（true）；
$（'#overlay'）.css({
“顶部”：底部+“px”，
});
});
$（'.game add'）。单击（函数（）{
$（“.game add”）.css（“背景色”，“d1a0a0”）；
$（'#overlay'）。removeClass（'active'）；
});

添加游戏
这是一个覆盖图
在jquery中尝试此添加类和删除类方法

首先用背景色创建一个类

<style>
    .btncolor{
        background-color:red;
    }
</style>


.btncolor{
背景色：红色；
}

然后对脚本进行一些小的修改

        <script>
$('.game-add').click(function() {
       $(this).addClass("btncolor"); // here 'btncolor' Class Will be added On click 
      $('#overlay').toggleClass('active');
     // calcs bottom of button 
      var bottom = $(this).position().top + $(this).outerHeight(true);
      $('#overlay').css({
        'top': bottom + 'px',
      });
    });

    $('#close').click(function(){
         $(".game-add").removeClass("btncolor"); //Here Class Will be removed on  click from Button
      $('#overlay').removeClass('active');
    });
</script>


$（'.game add'）。单击（函数（）{
$（this）.addClass（“btncolor”）；//单击此处将添加“btncolor”类
$（'#overlay'）。toggleClass（'active'）；
//计算按钮底部
var bottom=$（this.position（）.top+$（this.outerHeight）（true）；
$（'#overlay'）.css({
“顶部”：底部+“px”，
});
});
$（“#关闭”）。单击（函数（）{
$（“.game add”）.removeClass（“btncolor”）；//单击“从”按钮将删除该类
$（'#overlay'）。removeClass（'active'）；
});
您可能没有检查控制台，但出现了错误
未捕获引用错误：$未定义

要消除这个错误，只需在头部包含jquery库路径，就可以了。例如
。我用这个做了测试，它成功了
 你能告诉我们目前的问题是什么吗？颜色一点也不改变。对不起，你过去受的教育是错误的。@jamice#在美式英语中也被称为磅符号或数字符号，用来作为重量或数字的前缀，是的，我知道。这是一个有点厚脸皮的评论，美国人被错误地教育了一个肉饼和一磅的区别。没有冒犯的意思：）+1表示正确答案。我只是找不到合适的#词，所以我用谷歌搜索了一下。但是我把它改成了hash/numbersign，听起来好多了
$('.game-add').click(function(){

<style>
    .btncolor{
        background-color:red;
    }
</style>

        <script>
$('.game-add').click(function() {
       $(this).addClass("btncolor"); // here 'btncolor' Class Will be added On click 
      $('#overlay').toggleClass('active');
     // calcs bottom of button 
      var bottom = $(this).position().top + $(this).outerHeight(true);
      $('#overlay').css({
        'top': bottom + 'px',
      });
    });

    $('#close').click(function(){
         $(".game-add").removeClass("btncolor"); //Here Class Will be removed on  click from Button
      $('#overlay').removeClass('active');
    });
</script>