どのようにそれがスタイルは変わりますが、私は再びそれにreclickとき、それは削除私はそれをクリックしたときにそれを作りたい

Question

こんにちはみんな、私はこのコード

panelPlusK.append('<div id="foo">click To change the style</div><br>'); 

$('#foo').click(function() { 
    $('.agario-panel').css({ 
     'background-color': 'rgba(32, 68, 102, 0.72)', 
     'color': '#E91E63', 
     'border-color': '#2196F3', 
    }); 
    $('.agario-panel input, .agario-panel select').css({ 
     'background-color': 'rgba(44, 125, 116, 0.55)', 
     'color': '#23ff8d', 
    }); 
}); 

を持って、このコードで.toggleClass（）を使用スタイルは..I toggleClassののfuctionを見ましたが、私はそこにimplemt

Answer 1

単にいくつかのクラスにスタイルを移動し、それをトグルする方法を知らない：

$('#foo').click(function() { 
    $('.agario-panel').toggleClass('highlighted'); 
}); 

CSSであなたのようなものを持っているでしょうどこ：

/* default styles of the panel */ 
.agario-panel { 
    background-color: rgba(44, 125, 116, 0.55); 
    color: #23ff8d; 
} 
/* highlighted styles overwrite default */ 
agario-panel.highlighted { 
    background-color: rgba(32, 68, 102, 0.72); 
    color: #E91E63; 
    border-color: #2196F3; 
} 

一般的なアドバイスとして、要素をスタイリングするにはcssメソッドを使用しないでください。ほとんどの場合、addClass、removeClass、toggleClassの方が良いでしょう。このようにして、JSコードがCSSスタイルから独立している場合に大きな柔軟性が得られます。心配の分離=>より良いコードの質、より良い保守。

Answer 2

.style {  
    background-color: rgba(32, 68, 102, 0.72); 
    color: #E91E63; 
    border-color: #2196F3; 
    background-color: rgba(44, 125, 116, 0.55); 
    color: #23ff8d; 
} 

$('#foo').click(function() { 
    $('element').toggleClass('style'); 
} 

fooをクリックすると、要素にCSSスタイルが追加されます。もう一度クリックすると、スタイルクラスが削除されます。

私はクラスが間違ったスタイリングを持っているかもしれないが、うまくいけばアイデアを得ることができます！

Answer 3

あなたが使用することができます.addClass（）と.removeClass（）

$("#foo").click(function() { 
 
$("#foo").addClass("agrario-panel"); 
 
}); 
 

 
$("#remove").click(function() { 
 
$("#foo").removeClass("agrario-panel"); 
 
});

.agrario-panel { 
 
     background-color: rgba(32, 68, 102, 0.72); 
 
     color: #E91E63; 
 
     border-color:#2196F3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="foo">Click to change </div> 
 
<div id="remove">Click to Remove</div>