クリックしたときに要素の背景色を変更しようとしています。基本的には、クリックするたびにこの色を前後に切り替えることができます。クリック時に<tr>の背景色を変更する
はここで私が使用しているコードです：
function activateButton1() {
var x = document.getElementById('postButton1');
if (x.className == 'postButton1') {
x.className = 'postButton1on';
} else {
x.className = 'postButton1';
}
}
私は別の背景色を持つ2つの異なるCSSクラスを使用していますが、それは働いていません。誰も洞察力を提供することはできますか？
これはtoggle方法で行うことができます。
function activateButton1() {
this.classList.toggle("postButton1on");
}
あなたも、物事を単純化するために、HTMLでこれを発射できます限り.postButton1on CSSは後に宣言されたとして、その後
<tr onclick="this.classList.toggle('postButton1on')">...</tr>
そして、 .postButton1 cssの場合、背景色は.postButton1onになり、以前設定されたものが上書きされます。彼らは同じ名前を持っているとして、あなたは、少なくともあなたが投稿JSで、idとclassを混合する可能性があるため
ありがとうございました！ – Treedot
のjQueryを使用して、あなたが
$("#postButton1").on('click', function(){
$(this).toggleClass("postButton1on");
};
でそれを行うことができますが動作していない可能性があります。
<!DOCTYPE html>
<html>
<head>
<style>
.off {
background-color: white;
}
.on {
background-color: red;
}
</style>
<script>
function change() {
var x = document.getElementById('post');
if (x.className.match('on')) {
x.className = 'off';
} else {
x.className = 'on';
}
}
function change2() {
var x = document.getElementById('row');
if (x.className.match('on')) {
x.className = 'off';
} else {
x.className = 'on';
}
}
</script>
</head>
<body>
<button id="post" onclick="change()" class="on">hello</button>
<table>
<tr id="row" onclick="change2()" class="on">
<td>hey</td>
<td>hey</td>
</tr>
</table>
</body>
</html>
は、あなたもあなたのHTMLでの作業の例を示すことができる：ここで が動作するようにテストされたHTML文書に詰めすべてのもの、です。おそらく 'x.classList.toggle（ 'postButton1on'）'はあなたのCSSを正しく整理すればあなたの問題を解決するはずです –
[どのようにして要素のクラスを純粋なJavaScriptで切り替えるのですか？]（http://stackoverflow.com/questions/18880890/how-do-i-toggle-an-elements-class-in-pure-javascript）とhttp://stackoverflow.com/questions/195951/change-an-elements-class-with-javascriptも使用できます大変ありがとうございました –