琴& 2018-12-07 09:46 采纳率: 50%
浏览 3869
已采纳

如何给一个按钮实现多个事件

按钮功能

点击一个按钮后,按钮颜色改变,同时触发点击事件

按钮

<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(" ");

  • 写回答

6条回答 默认 最新

  • 天际的海浪 2018-12-07 11:05
    关注

    改用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);
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)

报告相同问题?

悬赏问题

  • ¥15 数学的三元一次方程求解
  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题