ボタンクリック時に背景色を変更する

Question

ボタンをクリックしたときに、ボタン "ゲーム追加"の背景色を変更したい。そして、 "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 

Answer 2

16進値の場合は、前に#を忘れています。

$(".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 3

あなただけslector .game-addを繰り返すの代わりにthisを使用することができます - それは問題に修正はありません。

あなたはCSSの16進数の前にある#シンボルを忘れてしまいました。

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

Answer 4

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

にいくつかの変更

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

と

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

を追加しましたここでは0

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

Answer 5

それからちょうどいくつかのマイナーな変更のすべてのこのクラスを追加し、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> 

Answer 6

コンソールにチェックが入っていない可能性があります。エラーUncaught ReferenceError: $ is not definedがあります。

このエラーを取り除くには、jqueryライブラリのパスを頭に入れておきましょう。例えば、<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>。私はこれでテストし、それは働いた！