0
115
VisualizaçõesSelect Row with Div onClick
I'm having trouble selecting all 5 Div's in the same row with the following structure (I can't modify the HTML and I can only use JS, no jQuery):
<div id="board-container">
<div id="board">
<div class="row">
<div class="exa"></div>
<div class="exa"></div>
<div class="exa"></div>
<div class="exa"></div>
<div class="exa"></div>
</div>
</div>
</div>
When you click the following should happen:
No click
onClick
Any idea or suggestion? Thanks!
*Edit
Sorry for my bad explanation. The idea is similar to that solution but I need to be able to select only one row because I have more than one, and I only need to be able to change the backgroud color of the one I select or click on.
2 Respostas
Responde à pergunta0
Your question is not quite clear, but I assume that you want to change the Background color for the Row, whenever you clicked on any of the elements inside the Row, if that is the case then you should do something like this and please let me know if that is not the case.
Demo:
var parentEle = document.querySelector("#board");
var rowChildren = document.querySelectorAll(".exa");
rowChildren.forEach(function(element, index){
console.log("Clicked on: " + index);
console.log(element);
element.addEventListener("click", function (){
console.log("Changeing the background color for enter ROW");
parentEle.lastElementChild.style.backgroundColor = "yellow";
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stack28</title>
</head>
<body>
<div id="board-container">
<div id="board">
<div class="row">
<div class="exa">A</div>
<div class="exa">B</div>
<div class="exa">C</div>
<div class="exa">D</div>
<div class="exa">E</div>
</div>
</div>
</div>
</body>
</html>0
If you want to change the background color of the divs with the class exa in the row by clicking the boxes use something like this.
$("#board-container #board").click(function() {
$('.exa').css('background', 'yellow');
alert("clicked");
});
or change this
$(this).css('background', 'yellow');
to change only elements with .exa in that row to change background color.
I have added an event handler because you do not say how its clicked.