Arbeiten mit DOM Ende Ereignisse

Ich habe ein kleines Problem. Wenn ich ein Formular mit wenigen inputs[type="text"] und divs um sie herum (plus und minus) habe ... wie inkrementieren und dekrementieren Eingang ohne Erstellen von Variablen, Klassen und IDs für jedes Tag? jemand sagte, ich Arrays verwenden kann, aber ich weiß nicht, wie es zu tun ...Arbeiten mit DOM Ende Ereignisse

Das Beispiel mit dieser Art von Lösung ist - Klassen für jeden Tag ...

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>

Quelle

2016-10-12 illia_6655321

können Sie einfach verwenden var child = document.getElementById ("Kind"); child.value ++; oder child.value--;

Quelle

2016-10-12 18:04:52

Es ist alles in einem DOM-Baum. Sie brauchen keine IDs auf EVERY Element, an das Sie einen Handler anhängen müssen, Sie müssen nur wissen, "wo" es in der Struktur ist, und von einem bekannten Punkt aus gehen.

z.B.

<div id="attach_to_me"> 
    <button>+</button> 
    <button>-</button> 
</div>

Keines dieser Tasten „bedeutet“ etwas, aber man kann trivialerweise etwas wie

$('#attach_to_me button').on('click', function(e) { 
    char = this.text(); 
    if (char == '+') { do_plus(); } 
    if (char == '-') { do_minus(); } 
});

haben, die einem einzigen Klick-Handler ist, beide Tasten zu kümmern. Wenn Sie genau wissen müssen, auf welche Schaltfläche geklickt wurde, zeigt e.target auf das Element, auf das geklickt wurde. Das gibt Ihnen Ihren Ausgangspunkt, um sich mit dem Baum umzusehen. Wenn Sie also mehrere Tasten in mehreren Reihen hat:

<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` 
});

Verwenden Sie Ihren bekannten Ausgangspunkt der Schaltfläche, die angeklickt wurde, dann nach oben/über im Baum den Text im benachbarten <td> zu bekommen.

Quelle

2016-10-12 18:06:14

sieht interessant aus ... aber wie man es in reinem JS schreibt? –

und ich habe ein Problem - wenn ich querySelectop verwenden, wählen Sie nur die erste, aber mit querySelectorAll erstellen Array und Skript tun "für" am Anfang und nachdem es Tasten nicht funktionieren ... wenn ich das so mache: –

Funktion clickFunction1 (Element) {// do click handle stuff;} Funktion clickFunction2 (Element) {// do click handle sachen;} var textInputs = document.querySelectAll ('input [type = text]'); für (var i = 0; i

Sie können die vorherigen und nächsten Geschwisterfunktionen verwenden, wenn Sie sicher sind, dass sich die HTML-Struktur nicht ändert.

Etwas wie folgt aus:

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); 
}

In Ihrem clickFunctions würden Sie die Eingabe gegenüber der vorherigen/nächsten Geschwister Funktion zum Ziel verweisen müssen.

Quelle

2016-10-12 18:15:38

das Problem ist, dass es einfach "für" am Anfang tun, aber nachdem es schaltet nicht funktionieren –

Arbeiten mit DOM Ende Ereignisse

Antwort

Verwandte Themen