更改背景颜色的按钮点击
问题描述:
当按钮被点击时,我想改变按钮“游戏添加”的背景颜色。当在叠加中点击“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>
任何帮助将大大赞赏。谢谢
答
您忘记了#
散列/ numbersign,因此无法识别颜色。
// Code above
$('.game-add').click(function() {
$(this).css("background-color","#5da93c");
$('#overlay').toggleClass('active');
// The rest of the code
答
你忘记了以前的#
十六进制值。这些线路
$(".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
,当点击其中的颜色发生变化的结果。
答
正如在另一个答复中提到你可以使用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>
答
增加了一些变化
$("#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>
答
这里试试这个添加类和删除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>
答
您可能没有检查过您的控制台,但有错误Uncaught ReferenceError: $ is not defined
。
要摆脱这个错误,只需在头部包含jquery库路径,你就可以走了。例如<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
。我测试了这个,它工作!
你能告诉我们目前的问题是什么? – urielSilva
根本不会改变颜色 –