更改背景顏色的按鈕點擊

-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

更改背景顏色的按鈕點擊

回答

相關問題