设置监听class改变事件，由原来的设置单个按钮点击触发方法onclick=“方法（）”改为addEventListener

最新推荐文章于 2023-12-29 13:03:14 发布

lwynbsp

最新推荐文章于 2023-12-29 13:03:14 发布

阅读量8.7k

点赞数 1

分类专栏： js html jq 文章标签： html class样式点改变

本文链接：https://blog.csdn.net/L727248517/article/details/54613181

版权

js 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

原本的在html元素内调用方法传this可替换为jq选择器选择对应样式，然后设置监听事件：

投诉建议单选
/*  function checkThis(e){
        var allSpan = document.getElementsByTagName("span");
        for (var int = 1, length = allSpan.length; int < length; int++) {
            allSpan[int].className = "pay_list_c1";
        }
        var theSpan = e.getElementsByTagName("span")[0];
        theSpan.className = "pay_list_c1 on";
        var myInput = theSpan.getElementsByTagName("input")[0];
        myInput.checked = true;
    } */

var btn = $(".col-xs-2.label98"); //获取单选btn元素
        for (var i = 0, length = btn.length; i < length; i++) { //把每个button元素便利出来
            var button = btn[i];
            if (button.addEventListener) { //判断游览器的兼容问题，如果是ie8以下的用的是else语用代码段里的
                button.addEventListener("click", change)
            } else {
                button.attachEvent("onclick", change)
            }
        }
        function change(e) { //e.currentTarget触发该事件的元素    e.target则是目标节点元素
            var allSpan = document.getElementsByTagName("span");
            for (var int = 1,length = allSpan.length; int < length; int++) {
                allSpan[int].className = "pay_list_c1";
            }
            e.currentTarget.getElementsByTagName("span")[0].className = "pay_list_c1 on";
            e.target.checked = true;
        }

信用评价星星
/*  function eva(e){
           var star = e.parentNode.getElementsByTagName("span");
           for (var int = 0,length = star.length; int < length; int++) {
                if(int<e.title){
                    star[int].className = "pj-star-icon on";
                }else{
                    star[int].className = "pj-star-icon";
                }
          }
           e.parentNode.getElementsByTagName("input")[0].value = e.title;
       } */

var btn = $(".pj-star-icon"); //获取单选btn元素
        for (var i = 0, length = btn.length; i < length; i++) { //把每个button元素便利出来
            var button = btn[i];
            if (button.addEventListener) { //判断游览器的兼容问题，如果是ie8以下的用的是else语用代码段里的
                button.addEventListener("click", change)
            } else {
                button.attachEvent("onclick", change)
            }
        }
        function change(e) { //e.currentTarget触发该事件的元素    e.target则是目标节点元素
            var thisElem = e.currentTarget; //由于span内部没有其他东西，这里的e.currentTarget==e.target
            var star = thisElem.parentNode.getElementsByTagName("span");
            for (var int = 0, length = star.length; int < length; int++) {
                if (int < thisElem.title) {
                    star[int].className = "pj-star-icon on";
                } else {
                    star[int].className = "pj-star-icon";
                }
            }
            thisElem.parentNode.getElementsByTagName("input")[0].value = thisElem.title;
        }