单击按钮更改背景颜色[重复]答案

【问题标题】：change background color on button click [duplicate]单击按钮更改背景颜色[重复]
【发布时间】：2017-08-09 09:44:27
【问题描述】：

我想在单击按钮时更改按钮“游戏添加”的背景颜色。当在叠加层中单击“X”时，我想将其更改回以前的颜色。这是我的代码

$('.game-add').click(function() {
   $(".game-add").css("background-color","5da93c");
  $('#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").css("background-color","1D1D1D");
  $('#overlay').removeClass('active');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-link game-add">ADD GAME</button>
<div id="overlay">
    <a href="#" id="close" class="pull-right" style="color: #fff;">X</a>
    <h2>This is an overlay</h2>
</div>

任何帮助将不胜感激。谢谢你

【问题讨论】：

您能告诉我们当前的问题是什么吗？
完全不变色

标签： javascript jquery html css

【解决方案1】：

您忘记了 # 哈希/数字符号，因此无法识别颜色。

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

【讨论】：

#=哈希£=英镑。抱歉，您过去受过错误的教育。
@Jamiec #在美式英语中也称为井号或数字符号，用于权重或数字的前缀，en.wikipedia.org/wiki/Number_sign
是的，我知道。美国人对哈希和磅之间的区别的教育不正确，这是一种有点讽刺的评论。没有任何冒犯的意思:) +1 正确答案。
我只是找不到正确的 # 词，所以我用谷歌搜索了它。但是我已经把它改成了 hash/numbersign，听起来好多了

【解决方案2】：

在这里试试这个在jquery中添加类和删除类的方法

首先创建一个带有背景颜色的类

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

【讨论】：

【解决方案3】：

您忘记了十六进制值之前的#。更改这些行后

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

到

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

给我一个结果，当点击button 和a 时颜色会发生变化。

【讨论】：

【解决方案4】：

正如另一个答案中提到的，您可以使用 this 代替重复选择器 .game-add - 但这不是解决问题的方法。

你忘记了 # 符号，它在 css 中位于十六进制颜色之前。

$('.game-add').click(function() {
   $(this).css("background-color","#5da93c");
  $('#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").css("background-color","#1D1D1D");
  $('#overlay').removeClass('active');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-link game-add">ADD GAME</button>
<div id="overlay">
    <a href="#" id="close" class="pull-right" style="color: #fff;">X</a>
    <h2>This is an overlay</h2>
</div>

【讨论】：

【解决方案5】：

添加了一些更改

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

和

 $('.game-add').click(function(){

到

$('.game-add').click(function(){

$('.game-add').click(function() {
   $(".game-add").css("background-color","5da93c");
  $('#overlay').toggleClass('active');
 // calcs bottom of button 
  var bottom = $(this).position().top + $(this).outerHeight(true);
  $('#overlay').css({
    'top': bottom + 'px',
  });
});

$('.game-add').click(function(){
     $(".game-add").css("background-color","#d1a0a0");
  $('#overlay').removeClass('active');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-link game-add">ADD GAME</button>
<div id="overlay">
    <a href="#" id="close" class="pull-right" style="color: #fff;">X</a>
    <h2>This is an overlay</h2>
</div>

【讨论】：

【解决方案6】：

你可能没有检查你的控制台有一个错误Uncaught ReferenceError: $ is not defined。

要摆脱这个错误，只需在头部包含 jquery 库路径，就可以了。例如<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>。我确实对此进行了测试，并且成功了！

【讨论】：