Javascript（不是jquery）按钮onclick，函数更改按钮调用函数的类
Posted
技术标签:
【中文标题】Javascript（不是jquery）按钮onclick，函数更改按钮调用函数的类【英文标题】：Javascript(not jquery) button onclick, function changes class of button calling function 【发布时间】：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") 吗？
我添加了我的意思的答案
【参考方案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。以上是关于Javascript（不是jquery）按钮onclick，函数更改按钮调用函数的类的主要内容，如果未能解决你的问题，请参考以下文章
当javascript在元素上调用提交时，jQuery覆盖表单提交不起作用
如何将 ExtJS“复选框”（按钮）与 Javascript/JQuery 同步？
使用 javascript/jquery 检测 Asp.Net 表单是不是有效
单击 HTML 表格并获取行号（使用 Javascript，而不是 jQuery）