Question

我知道您可以使用

更改按钮的类别

 document.getElementById("ID1").setAttribute("class", "NewClass");

但是，如果单击该按钮，我想将类更改为active，无论如何都要在不为按钮分配ID的情况下执行此操作？
我也不想用这个类改变所有按钮，并且我知道你也可以逐个使用get元素。

按钮由另一段javascript生成，看起来像

    <button class="btn" onclick="myFunction(this.innerHTML)">A</button>
    <button class="btn" onclick="myFunction(this.innerHTML)">B</button>
    <button class="btn" onclick="myFunction(this.innerHTML)">C</button>
    <button class="btn" onclick="myFunction(this.innerHTML)">D</button>
    <button class="btn" onclick="myFunction(this.innerHTML)">F</button>
    <button class="btn" onclick="myFunction(this.innerHTML)">G</button>

任何帮助将不胜感激如果您需要更多信息，请告诉我。

Answer 1

<button class="btn" onclick="myFunction(this)">A</button>


<script>
function myFunction(button) {
    var text = button.innerHTML;
    // do whatever with text that you were doing before...
    button.setAttribute("class", "active");
}
</script>

Answer 2

<script type="text/javascript">
    function a(){
        this.classList.toggle('first');
        this.classList.toggle('sec');
    }
    document.querySelector('#container').addEventListener('mouseenter', a )
    document.querySelector('#container').addEventListener('mouseleave', a )
</script>

来自How to toggle class using pure javascript in html

Answer 3

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test Page</title>
        <link rel="stylesheet" type="text/css" src="css/style.css" />

    </head>
<body>
    <button class="btn" onclick="myFunction(this)">A</button>
    <button class="btn" onclick="myFunction(this)">B</button>
    <button class="btn" onclick="myFunction(this)">C</button>
    <button class="btn" onclick="myFunction(this)">D</button>
    <button class="btn" onclick="myFunction(this)">F</button>
    <button class="btn" onclick="myFunction(this)">G</button>

    <script>
                function myFunction(object){
                    object.className = object.className + " btn-active";
                }
        </script>
</body>
</html>

Answer 4

尝试这样的事情

<强> HTML

<button class="btn" onclick="myFunction(this)">A</button>

<强>的javascript

function myFunction(btn){
    btn.setAttribute("class", "NewClass");// change class

    btn.innerHTML // use your inner html here
}

Answer 5

这可能是你想要的

(function() {
    var buttons = document.getElementsByClassName('btn');
    if(buttons && buttons.length > 0) {
        for(var i=0; i < buttons.length; i++) {
            var button = buttons[i];
            button.addEventListener('click', function(e) {
                e.preventDefault();
                this.classList.toggle('active');
            });
        }
    }
})();

您将点击事件处理程序附加到所有按钮。

http://jsfiddle.net/doiks14/zn6dgn0m/5/

Javascript（不是jquery）按钮onclick，函数更改按钮调用功能的类

5 个答案: