Auswahl Next HTML Sibling in Native Javascript

Ich bin neu in Javascript und ich erstelle eine "Push eine Tastaturtaste, um dieses schwarze Quadrat über" Art von Spiel. Ich versuche, herauszufinden, wie eine native JavaScript-Funktion erstellen, die ermöglicht:Auswahl Next HTML Sibling in Native Javascript

ein keypress einem <td> Elemente die Klasse von „aktiv“ zu geben, die in der Leitung (oder Geschwister) als nächste zu einem <td>, die bereits die Klasse hat "aktiv". Ich möchte auch das 'aktuelle' <td class="active"> Element haben, um seine "aktive" Klasse zur gleichen Zeit zu entfernen.

Bisher habe ich es geschafft, eine Funktion zu erstellen, die einen Klick auf <td> ermöglicht und die Klasse "active" auf <td> hinzufügt, während gleichzeitig jede "aktive" Klasse aus den umgebenden Geschwistern entfernt wird. Anstatt zu klicken, möchte ich der nächsten <td> "aktiv" geben, wenn Sie den Buchstaben 'm' drücken.

Entschuldigt, wenn ich schlecht bin zu erklären: hier ist mein Code:

var racerTable = document.getElementsByClassName("racer-table"); 
 
var p1items = document.getElementById("player1-strip").querySelectorAll("td"); 
 

 
var lastp1 = p1items[p1items.length-1]; 
 

 
for (var i = 0; i < p1items.length; i++) { 
 
    p1items[i].addEventListener("click", player1Race); 
 
} 
 

 
function player1Race() { 
 
    for (var i = 0; i < p1items.length; i++) { 
 
    p1items[i].className = ""; 
 
    } 
 
    
 
    // The expression below is where I need help 
 
    
 
    this.className = "active"; 
 
    
 
    \t if (lastp1.className === "active") { 
 
    \t alert("Player One Won!"); 
 
    } else { 
 
    
 
    } 
 
}

.racer-table td { 
 
    background-color: #ededed; 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 

 
.racer-table td.active { 
 
    background-color: black; 
 
}

<body> 
 

 
    <table class="racer-table"> 
 

 
    <tr id="player1-strip"> 
 
     <td class="active"></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 

 
    </table> 
 

 
</body>

JSFiddle:

https://jsfiddle.net/sean_johnson/bgdb716d/139/

Quelle

2016-03-29 Sean

Ersetze 'this' im click-Ereignis mit' document.querySelectorAll ("td.active"); 'schau auch in' elm.nextElementSibling', es kann dir ein wenig Tipparbeit ersparen ... – dandavis

Zellen in einer Tabelle haben a [* CellIndex *] (https://www.w3.org/TR/html5/tabular-data.html#dom-tdth-cellindex). Wenn sich die nächste zu besuchende Zelle in derselben Zeile befindet, rufen Sie einfach die mit dem nächsthöheren Index ab. Z.B. 'row = cell.parentNode; nextCell = row.cells [cell.cellIndex + 1] '. Anstatt einen Listener auf jede Zelle zu setzen, sollten Sie einen einzelnen Listener in die Tabelle einfügen (suchen Sie nach Ereignisdelegierung). – RobG

HTML - beachten Sie die Zugabe des Tabindex-Attribut, mit dem das Element fokussiert werden kann a nd also das Keydown-Ereignis zu feuern.

<body> 
    <table class="racer-table"> 
    <tr id="player1-strip" tabindex="1"> 
     <td class="active"></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    </table> 
</body>

JavaScript

// Get the player's strip 
var control = document.getElementById("player1-strip"); 

// Add an event handler to the strip (tr) 
control.addEventListener("keydown", function(event) { 

    // Get the current active td 
    var active = document.querySelector(".active"); 

    // Get the letter from the key pressed, lowercase it 
    var letter = String.fromCharCode(event.keyCode).toLowerCase(); 
    var next; 

    // Show it in the console (Firebug) 
    console.log(letter); 

    // Act on the key 
    switch (letter) { 
    case 'm': 
     // Get the next cell in the row 
     next = document.querySelector(".active + td"); 

     // Remove the active class from the current active cell 
     active.classList.remove("active"); 

     // If there is another cell 
     if (next !== null) { 

     // Make the next cell active 
     next.classList.add("active"); 
     } else { 
     console.log('Done'); 
     } 
     console.log(next); 
     break; 
    } 
});

Dies ist ein einfaches Beispiel. Sie können die Switch-Anweisung auf weitere Schlüssel erweitern.

Geschrieben unter Firefox auf CentOS - Sie müssen möglicherweise den Code für andere Browser oder Betriebssysteme anpassen.

Quelle

2016-03-29 02:55:54 user2182349

Sie sind eine Legende, funktioniert ein Charme - ich war für 2 Stunden +, Prost dafür. – Sean

Auswahl Next HTML Sibling in Native Javascript

Antwort

Verwandte Themen