按钮外观未在类更改时更新答案

【问题标题】：Button appearance not updating on class change按钮外观未在类更改时更新
【发布时间】：2018-01-28 13:32:35
【问题描述】：

单击按钮时，其背景色不会按预期变为黄色，之前单击的按钮的背景色也不会恢复为红色。我的目标是通过更改它们的类来更改按钮的颜色。当按钮的类改变时，它们不会改变颜色。 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>

【问题讨论】：

标签： javascript html css button

【解决方案1】：

添加到 jQuery

link

CSS

.button {
    background-color: red;
}

.c {
    background-color: yellow;
}
.r{
    background-color: red;
}

jQuery

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

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

【讨论】：