使用DOM結束事件
[英]Working with DOM end events
問題描述
我有一個小問題。 如果我的表單很少inputs[type="text"]並且div圍繞它們（加號和減號）...如何在不為每個標簽創建變量，類和ID的情況下遞增和遞減輸入？ 有人說我可以使用數組，但是我不知道該怎么做...
示例就是這種類型的解決方案-每個標簽的類...
var child = document.querySelector("#child"); var adult = document.querySelector("#adult"); var rooms = document.querySelector("#rooms"); var plusChild = document.querySelector(".plus_child"); var minusChild = document.querySelector(".minus_child"); var childV = child.value; var adultV = adult.value; var roomsV = rooms.value; plusChild.addEventListener("click", function(){ if(childV<10){ childV++; child.value = "" + childV; } }); minusChild.addEventListener("click", function(){ if(childV>0) { childV--; child.value = "" + childV; } });
.main-form { width: 500px; margin: 0 auto; } .input { display: inline-block; width: 100px; height: 15px; background: none; outline: none; } .plus { display: inline-block; background: #999999; width: 15px; height: 15px; } .minus { display: inline-block; background: #999999; width: 15px; height: 15px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <form action="" class="main-form"> <div class="input-item"> <span>child</span> <div class="toggle plus plus_child">+</div> <input type="text" class="input" placeholder="0" id="child"> <div class="toggle minus minus_child">-</div> </div> <br> <div class="input-item"> <span>adult</span> <div class="toggle plus">+</div> <input type="text" class="input" placeholder="0" id="adult"> <div class="toggle minus">-</div> </div> <br> <div class="input-item"> <span>rooms</span> <div class="toggle plus">+</div> <input type="text" class="input" placeholder="0" id="rooms"> <div class="toggle minus">-</div> </div> </form> <script src="script.js"></script> </body> </html>
3 個解決方案
解決方案1
0 2016-10-12 18:04:52
您可以簡單地使用var child = document.getElementById（“ child”）; child.value ++; 或child.value--;
解決方案2
0 2016-10-12 18:06:14
全部都在DOM樹中。 您不需要將處理程序附加到的每個元素上的ID，只需知道它在樹中的“位置”，然后從一個已知點出發即可。
例如
<div id="attach_to_me">
<button>+</button>
<button>-</button>
</div>
這些按鈕都不“起作用”，但是您可以輕松地得到類似
$('#attach_to_me button').on('click', function(e) {
char = this.text();
if (char == '+') { do_plus(); }
if (char == '-') { do_minus(); }
});
這是一個單擊處理程序，同時照顧了兩個按鈕。 如果您需要確切地知道WHICH按鈕被單擊，則e.target指向被單擊的元素。 這為您提供了環顧四周樹木的起點。 因此，如果您在多行中有多個按鈕：
<tr>
<td>foo</td><td><button>x</button></td>
<td>bar</td><td><button>x</button></td>
<td>baz</td><td><button>x</button></td>
</tr>
$('td button').on('click', function (e) {
clicked_button = e.target;
e.target.parentNode.previousSibling.text(); // `bar`
});
使用您所單擊按鈕的已知起點，然后在樹中上移/上移以在相鄰的<td>獲取文本。
解決方案3
0 2016-10-12 18:15:38
如果您確定html結構不會改變，則可以使用上一個和下一個兄弟功能。
像這樣：
function clickFunction1(Element) { //do click handle stuff;}
function clickFunction2(Element) { //do click handle stuff;}
var textInputs = document.querySelectAll('input[type=text]');
for(var i=0; i < textInputs.length; i++) {
textInputs[i].previousSibling.addEventListener('click',clickFunction1);
textInputs[i].nextSibling.addEventListener('click',clickFunction2);
}
在clickFunction內部，您需要引用相反的上一個/下一個同級函數來定位輸入。
使用DOM節點上的焦點和模糊事件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.