Javascript 类更改时按钮外观未更新_Javascript_Html_Css_Button

Javascript 类更改时按钮外观未更新

javascript html css button

Javascript 类更改时按钮外观未更新,javascript,html,css,button,Javascript,Html,Css,Button,单击按钮时，其背景色不会按预期变为黄色，先前单击的按钮的背景色也不会恢复为红色。我的目标是通过更改按钮的类来更改按钮单击时的颜色。当按钮的类别改变时，它们不会改变颜色。testFunction（）的目的是更新按钮的颜色。testFunction2（）的目的是向按钮添加onclick函数 <!DOCTYPE html> <html> <head> <title>TEST</title> </head> <sty

单击按钮时，其背景色不会按预期变为黄色，先前单击的按钮的背景色也不会恢复为红色。我的目标是通过更改按钮的类来更改按钮单击时的颜色。当按钮的类别改变时，它们不会改变颜色。testFunction（）的目的是更新按钮的颜色。testFunction2（）的目的是向按钮添加onclick函数

<!DOCTYPE html>
<html>

<head>
    <title>TEST</title>
</head>
<style>
    .button {
        background-color: red;
    }

    .c {
        background-color: yellow;
    }
</style>

<body>
    <table>
        <tr>
            <td>test1</td>
        </tr>
        <tr>
            <td id="test1">
                <button class="c">0</button>
                <button class="">1</button>
                <button class="">2</button>
                <button class="">3</button>
            </td>
        </tr>
        <tr>
            <td>test2</td>
        </tr>
        <tr>
            <td id="test2">
                <button class="c">0</button>
                <button>1</button>
                <button>2</button>
                <button>3</button>
            </td>
        </tr>
    </table>

    <script>
        var lastClick1 = 0;
        var lastClick2 = 0;
        //alert('js');
        function testFunction(c, n) {
            //  alert('tf');
            if (c == 0) {
                //  alert('s=0');
                if (lastClick1 != n) {
                    var a = document.getElementById("test1").children;
                    a[lastClick1].class = '';
                    a[n].class = 'c';
                    alert('n: ' + n + ' class: ' + a[n].class);
                    alert('lastclick:' + lastClick1 + ' class: ' + a[lastClick1].class);
                    lastClick1 = n;
                }
            } else {
                //  alert('else');
                if (lastClick2 != n) {
                    var b = document.getElementById("test2").children;
                    b[lastClick2].class = '';
                    b[n].class = 'c';
                    alert('n: ' + n + ' class: ' + b[n].class);
                    alert('lastclick:' + lastClick2 + ' class: ' + b[lastClick2].class);
                    lastClick2 = n;
                }
            }
        }

        function testFunction2() {
            //alert('tf2');
            var t1 = document.getElementById("test1").children;
            var t2 = document.getElementById("test2").children;
            //alert(t1);
            for (var i = 0; i < 6; i++) {
                t1[i].onclick = function() {
                    testFunction(0, parseInt(this.innerText));
                };
                t2[i].onclick = function() {
                    testFunction(1, parseInt(this.innerText));
                };
            }
        }

        testFunction2();
    </script>
</body>

</html>


试验
.按钮{
背景色：红色；
}
c{
背景颜色：黄色；
}
测试1
0
1.
2.
3.
测试2
0
1.
2.
3.
var lastClick1=0；
var lastClick2=0；
//警报（'js'）；
函数testFunction（c，n）{
//警报（“tf”）；
如果（c==0）{
//警报（'s=0'）；
如果（上次单击1！=n）{
var a=document.getElementById（“test1”）.children；
a[lastClick1]。类=“”；
a[n]。类='c'；
警报（'n:'+n+'类：'+a[n].类）；
警报（'lastclick:'+lastClick1+'类：'+a[lastClick1].class）；
最后点击1=n；
}
}否则{
//警报（“其他”）；
如果（上次单击2！=n）{
var b=document.getElementById（“test2”）.children；
b[lastClick2]。类=“”；
b[n]。类='c'；
警报（'n:'+n+'类：'+b[n].类）；
警报（'lastclick:'+lastClick2+'类：'+b[lastClick2].class）；
lastClick2=n；
}
}
}
函数testFunction2（）{
//警报（'tf2'）；
var t1=document.getElementById（“test1”）.children；
var t2=document.getElementById（“test2”）.children；
//警报（t1）；
对于（变量i=0；i<6；i++）{
t1[i].onclick=function（）{
testFunction（0，parseInt（this.innerText））；
};
t2[i].onclick=function（）{
testFunction（1，parseInt（this.innerText））；
};
}
}
testFunction2（）；

添加到jQuery

CSS

Jquery

$(function(){
    $('button').on('click', function () {
        $(this).parent('td').children('.c').removeClass('c').addClass('r');

        $(this).addClass('c');
    })
});

添加到jQuery

CSS

Jquery

$(function(){
    $('button').on('click', function () {
        $(this).parent('td').children('.c').removeClass('c').addClass('r');

        $(this).addClass('c');
    })
});