更改背景颜色的按钮点击

-1

当按钮被点击时，我想改变按钮“游戏添加”的背景颜色。当在叠加中点击“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>

任何帮助将大大赞赏。谢谢

来源

2017-08-09 Sk Golam Saroar

你能告诉我们目前的问题是什么？ – urielSilva

根本不会改变颜色 –

您忘记了#散列/ numbersign，因此无法识别颜色。

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

来源

2017-08-09 09:50:04

＃= hash£=磅。对不起，你过去受过错误的教育。 – Jamiec

@Jamiec＃也被称为英镑符号或美式英语中的数字符号，用于前缀权重或数字， https://en.wikipedia.org/wiki/Number_sign –

是的，我知道。美国人对哈希和英镑之间的差异进行了错误的教育，这在评论中颇有微词。 Did not mean any any offty :) +1为正确的答案。 – Jamiec

你忘记了以前的#十六进制值。这些线路

$(".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，当点击其中的颜色发生变化的结果。

来源

2017-08-09 09:49:23 ikkuh

正如在另一个答复中提到你可以使用this到位重复slector .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>

来源

2017-08-09 09:50:16 Jamiec

增加了一些变化

$("#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>

来源

2017-08-09 09:54:22

这里试试这个添加类和删除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>

来源

2017-08-09 10:00:56

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

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

来源

2017-08-09 10:15:33 skm

更改背景颜色的按钮点击

回答

相关问题