Javascript（非jquery）按钮onclick，函数更改按钮调用函数的类
[英]Javascript(not jquery) button onclick, function changes class of button calling function
问题描述
I know you can change the class of a button using 
我知道您可以使用更改按钮的类
document.getElementById("ID1").setAttribute("class", "NewClass");
But say i wanted to change the class to active if the button is clicked, is there anyway to do this without assigning an ID to the buttons ? 但是，如果单击按钮，我想将类更改为active类，是否有必要在不为按钮分配ID的情况下执行此操作？
I also don't want to change all buttons with this class and am aware you can use get element by class as well. 我也不想更改此类的所有按钮，并且知道您也可以按类使用get元素。
The buttons are generated by another piece of javascript and look like 这些按钮是由另一段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>
Any help would be appreciated. 任何帮助，将不胜感激。
Also if you need any more information just let me know. 另外，如果您需要更多信息，请告诉我。
5 个解决方案
解决方案1
2 已采纳 2014-10-27 11:31:22
<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
1 2014-10-27 11:23:45
<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>
from How to toggle class using pure javascript in html 从如何在HTML中使用纯JavaScript切换类
解决方案3
1 2014-10-27 11:27:03
<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>
解决方案4
1 2014-10-27 11:33:03
try something like this 尝试这样的事情
html html
<button class="btn" onclick="myFunction(this)">A</button>
javascript javascript
function myFunction(btn){
btn.setAttribute("class", "NewClass");// change class
btn.innerHTML // use your inner html here
}
解决方案5
1 2014-10-27 11:41:07
This is probably what you want 这可能是您想要的
(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');
});
}
}
})();
You're attaching a click event handler to all the buttons. 您要将click事件处理程序附加到所有按钮。
http://jsfiddle.net/doiks14/zn6dgn0m/5/ http://jsfiddle.net/doiks14/zn6dgn0m/5/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.