設定監聽class改變事件,由原來的設定單個按鈕點選觸發方法onclick=“方法()”改為addEventListener
阿新 • • 發佈:2019-01-23
原本的在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;
}