Question

我想在点击按钮时更改按钮“game-add”的背景颜色。当在叠加层中单击“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>

任何帮助都将在很大程度上受到赞赏。谢谢

Answer 1

您忘记了// Code above $('.game-add').click(function() { $(this).css("background-color","#5da93c"); $('#overlay').toggleClass('active'); // The rest of the code哈希/数字符号，因此无法识别颜色。

user (name , email , address)

Answer 2

这里尝试这个添加类并删除jquery中的类方法

Fisrt of All创建一个具有背景颜色的类

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

Answer 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时颜色会发生变化。

Answer 4

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

您已经忘记了css中以十六进制颜色开头的#符号。

＆＃13;

$('.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');
});

＆＃13;

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

＆＃13;

Answer 5

添加了一些更改

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

和

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

到

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

＆＃13;

$('.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');
});

＆＃13;

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

＆＃13;

Answer 6

您可能没有检查过您的控制台是否有错误Uncaught ReferenceError: $ is not defined。

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

按钮单击更改背景颜色

6 个答案: