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

【问题标题】：Javascript(not jquery) button onclick, function changes class of button calling functionJavascript（不是jquery）按钮onclick，函数更改按钮调用函数的类
【发布时间】：2014-12-22 13:29:01
【问题描述】：

我知道您可以使用

更改按钮的类别

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

但是说如果单击按钮，我想将类更改为active，是否可以在不为按钮分配 ID 的情况下执行此操作？
我也不想使用此类更改所有按钮，并且知道您也可以按类使用获取元素。

按钮是由另一段 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>

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

【问题讨论】：

你能改变myFunction()???????
而不是使用 this.innerHTML 只需使用 this 然后您就可以访问被单击的按钮，而不仅仅是文本。那么你可以这样做 this.setAttribute("class", "NewClass");在函数中。
@rajeshkakawat 是的，它现在正在做其他事情，只是为了获得价值。
@Brian，我会在函数中使用this.setAttribute("class", "NewClass")，还是使用任何变量。例如，如果是MyFunction(x)，我会使用x.setAttribute("class", "NewClass") 吗？
我添加了我的意思的答案

标签： javascript function button

【解决方案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>

【讨论】：

效果很好，干杯:) 不敢相信我没想过要尝试！

【解决方案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

【讨论】：

我想要它，如果它被点击，而不是悬停，但这很有用。 +1.谢谢你:)

【解决方案3】：

试试这样的

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
}

【讨论】：

另一个答案是在你之前发布的，所以我接受了那个答案，不过我很感激你的帮助:) +1

【解决方案4】：

<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>

【讨论】：

这不会改变所有按钮吗？

【解决方案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/

【讨论】：

这非常有用，谢谢 :) 我可能会继续切换按钮，所以 +1
这也使用任何 jquery 吗？
不，这只是 JavaScript
我查看了切换功能，它看起来像是一个 jquery 插件？
developer.mozilla.org/en-US/docs/Web/API/Element.classList - 这是一个原生 JavaScript 函数，但如果您想支持旧版浏览器或只是使用另一种切换方式，您可能需要使用 polyfill。