0
108
VistasSeleccionar fila con Div onClick
Tengo problemas para seleccionar los 5 Div en la misma fila con la siguiente estructura (no puedo modificar el HTML y solo puedo usar 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>Al hacer clic, debería ocurrir lo siguiente:
sin clic
al hacer clic
¿Alguna idea o sugerencia? ¡Gracias!
*Editar
Perdón por mi mala explicación. La idea es similar a esa solución, pero necesito poder seleccionar solo una fila porque tengo más de una, y solo necesito poder cambiar el color de fondo de la que selecciono o en la que hago clic.
2 Respuestas
Responde la pregunta0
Su pregunta no está muy clara, pero asumo que desea cambiar el color de fondo de la Fila , cada vez que hace clic en cualquiera de los elementos dentro de la Fila, si ese es el caso, debe hacer algo como esto y déjeme saber si no es así.
Manifestación:
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
Si desea cambiar el color de fondo de los divs con la clase exa en la fila haciendo clic en los cuadros, use algo como esto.
$("#board-container #board").click(function() { $('.exa').css('background', 'yellow'); alert("clicked"); });o cambia esto
$(this).css('background', 'yellow');para cambiar solo los elementos con .exa en esa fila para cambiar el color de fondo.
He agregado un controlador de eventos porque no dice cómo se hace clic.