按钮功能点击一个按钮后，按钮颜色改变，同时触发点击事件按钮<button type="button" class="colorchange" onclick="gr('.changeX','.changeY');">Windows</button>
<button type="button" class="colorchange" onclick="gr('.changeY','.changeX');">macOS</button>点击事件的JS原生代码function gr(s1,s2){
var x = document.querySelectorAll(s1);
var y = document.querySelectorAll(s2);
var i;
for (i = 0;i < x.length;i++){
x[i].style.display = 'block';
}
for (i = 0;i < y.length;i++){
y[i].style.display = 'none';
}
}按钮改变的JS原生代码var lis = document.getElementsByClassName("colorchange");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function(ind) {
return function() {
addClass(this, "active");
var sib = siblings(this);
for (var j = 0; j < sib.length; j++) {
removeClass(sib[j], "active");
}
}
}(i)
}
//样式函数
function addClass(obj, name) {
obj.className = obj.className + " " + name;
}
//获取其他按钮
function siblings(obj) {
var sibArr = obj.parentNode.children;
var sibNewArr = [];
for (var i = 0; i < sibArr.length; i++) {
if (sibArr[i] != obj) {
sibNewArr.push(sibArr[i]);
}
}
return sibNewArr;
}
//删除样式函数
function removeClass(obj, name) {
var classStr = obj.className;
var classArr = classStr.split(" ");
var classNewArr = [];
for (var i = 0; i < classArr.length; i++) {
if (classArr[i] != name) {
classNewArr.push(classArr[i]);
}
}
obj.className = classNewArr.join(" ");
5 回答
天涯尽头无女友
TA贡献1831条经验 获得超9个赞
根据你的描述，我猜测你应该是要实现这样的功能：
只有一个按钮，在Window系统和Mac系统下，分别显示不同的文案，点击时执行不同的事件。
那么我认为，你无须写两个button。
以下为个人看法：
首先，用HTML写一个button，button上有一个属性data。
data的值用来标注是Windows还是Mac。当然你可以用JS动态赋值上去。比如0代表WIndows，1代表Mac。
button上面显示的文字也是，可以默认一个，也可以通过JS动态赋值。
然后就是点击事件。当点击的时候，先判断data的值。然后用一个if else 来执行不同的事件。
另外，如果你想要点击切换的话，也可以执行点击的时候改变data的值。
这样，在下次点击的时候data的值改变了，就会去执行另外一个方法了。
不知道有没有讲明白，如果有需要，请追问。
鸿蒙传说
TA贡献1865条经验 获得超7个赞
改用addEventListener绑定事件
lis[i].addEventListener("click", function(ind) {
return function() {
addClass(this, "active");
var sib = siblings(this);
for (var j = 0; j < sib.length; j++) {
removeClass(sib[j], "active");
}
}
}(i), false);添加回答
举报
0/150
提交
取消