ネイティブJavaScriptで次のHTML兄弟を選択する

私はjavascriptを初めて使用しています。この黒い四角形を進むためのキーボードボタンを押しています。ネイティブJavaScriptで次のHTML兄弟を選択する

<td>要素を、すでにクラスを持っている<td>に次の行（または兄弟）である「アクティブ」のクラスを与えるためにkeypressするにはどうすればいいですか？ "アクティブ"。私はまた、現在の '<td class="active">'要素を持って、それが同時に「アクティブ」クラスを削除したいと思っています。

これまでは、<td>をクリックして、アクティブなクラスを周囲の兄弟から削除しながら、選択した<td>のクラスをアクティブにする機能を作成しました。クリックする代わりに、文字「m」を押したときに、次の文字「<td>」に「アクティブ」を与えたいと思います。

謝罪、私は説明が下手だ場合：ここに私のコードは次のとおりです。

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/

出典

2016-03-29 Sean

clickイベントの 'this 'を' document.querySelectorAll（ "td.active"）;で置き換えます。 '' elm.nextElementSibling'を調べると、いくつかの入力を省くことができます。 – dandavis

テーブル内のセルには、 [* cellIndex *]（https://www.w3.org/TR/html5/tabular-data.html#dom-tdth-cellindex）。訪問先の次のセルが同じ行にある場合は、次に高いインデックスを持つセルを取得します。例えば。 'row = cell.parentNode; nextCell = row.cells [cell.cellIndex + 1] '。リスナーをすべてのセルに配置するのではなく、単一のリスナーをテーブルに配置することを検討してください（イベント委任の検索）。 – RobG

HTMLは - の追加を注意してください要素にフォーカスを当てるtabindex属性このようにしてkeydownイベントを起動します。

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

これは単純な例です。 スイッチステートメントを拡張して、より多くのキーを処理できます。

CentOSのFirefoxの下で書かれています - 他のブラウザやOSのコードを調整する必要があるかもしれません。

出典

2016-03-29 02:55:54 user2182349

あなたは伝説であり、魅力を発揮しています - 私は2時間+の間これを賞賛しました。 – Sean

ネイティブJavaScriptで次のHTML兄弟を選択する

答えて

関連する問題