//vanilla jsで親要素探索する用の関数
function getParents(el, parentSelector /* optional */) {
if (parentSelector === undefined) {
return false;
}
var p = el.parentNode;
while (!p.classList.contains(parentSelector)) {
var o = p;
p = o.parentNode;
}
return p;
}
document.addEventListener('click',function(e){
e = e || window.event;
var target = e.target || e.srcElement,
text = target.textContent || target.innerText;
var val = 0;
//クリックしたDOMが.js-qty_upだったら
if(target.classList.contains('js-qty_up')){
val = 1;
} else if(target.classList.contains('js-qty_down')) {
val = -1;
} else {
return false;
}
var parent = getParents(target,'js-qty');//親の.js-qtyを取得して
var input = parent.querySelectorAll('.js-qty_target');//親の.js-qtyの子の.js-qty_targetを取得して
//Nodelistを回す
for (let i = 0; i < input.length; i++) {
if(input[i].classList.contains('js-qty_target')){
//.js-qty_target持ってるDOMに対して
var num = parseInt(input[i].value);
num = isNaN(num) ? 1 : num;
input[i].value = num + val < 1 ? 1 : num + val;
}
}
},false);
コメント