weixin_43645287
琴&
2018-12-07 09:46
采纳率: 75%
浏览 3.0k

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

按钮功能

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

按钮

<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条回答 默认 最新

  • jslang
    天际的海浪 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);
    
    
    点赞 评论
  • ldTrueLove
    林子懿 2018-12-07 09:54

    一个按钮实现多个事件的话,需要传递不同的参数,然后根据参数去改变值

    点赞 评论
  • wyAdfAo
    mylittleluck 2018-12-07 09:55

    没必要想那么复杂,你就用一个点击事件 ,把改变颜色和你想让点击事件干的事一块做了,效果是一样的

    点赞 评论
  • weixin_42173425
    博主kill 2018-12-07 10:33

    你可以写a方法,b方法,c方法 然后用一个触发的方法绑定你的dom 触发的时候 调用a,b,c就好了

    点赞 评论
  • candy_tity
    陈田田 2018-12-07 12:58

    根据你的描述,我猜测你应该是要实现这样的功能:
    只有一个按钮,在Window系统和Mac系统下,分别显示不同的文案,点击时执行不同的事件。
    那么我认为,你无须写两个button。
    以下为个人看法:

    首先,用HTML写一个button,button上有一个属性data。
    data的值用来标注是Windows还是Mac。当然你可以用JS动态赋值上去。比如0代表WIndows,1代表Mac。
    button上面显示的文字也是,可以默认一个,也可以通过JS动态赋值。

    然后就是点击事件。当点击的时候,先判断data的值。然后用一个if else 来执行不同的事件。

    另外,如果你想要点击切换的话,也可以执行点击的时候改变data的值。

    这样,在下次点击的时候data的值改变了,就会去执行另外一个方法了。

    不知道有没有讲明白,如果有需要,请追问。

    点赞 评论
  • weixin_44014185
    weixin_44014185 2018-12-07 13:15

    点赞 评论

相关推荐