1. 程式人生 > >設定監聽class改變事件,由原來的設定單個按鈕點選觸發方法onclick=“方法()”改為addEventListener

設定監聽class改變事件,由原來的設定單個按鈕點選觸發方法onclick=“方法()”改為addEventListener

原本的在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;
        }