Me dieron la tarea de hacer 7 div anidados de modo que el div en el que se hizo clic debería cambiar su color a blanco, mientras que todos los div superiores de los div en los que se hizo clic deberían cambiar su color a naranja. Mientras que todos los div inferiores deberían cambiar su color a verde.
$(".div").click(function() { $(this).css({ "background-color": "white" }); $(this).parents().css({ "background-color": "orange" }); $(this).children().css({ "background-color": "green" }); }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <title>Document</title> <style> div { border: 2px solid black; margin: 30px 20px; } </style> </head> <body> <div id="main"> <div class="div" id="1"> <div class="div" id="2"> <div class="div" id="3"> <div class="div" id="4"> <div class="div" id="5"> <div class="div" id="6"> <div class="div" id="7"> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>¡Estás bastante cerca, en realidad! La razón de la salida aburrida y no interactiva se debe a cómo los eventos se propagan a través de los elementos. Aquí hay un excelente artículo en mdn sobre eventos , pero lo más importante es detener la propagación.
El objeto de evento estándar tiene una función disponible llamada stopPropagation() que, cuando se invoca en el objeto de evento de un controlador, hace que se ejecute el primer controlador, pero el evento no avanza más en la cadena, por lo que no habrá más controladores. ser ejecutado
Entonces, en su ejemplo, se puede hacer clic en el div original, pero los otros div también reciben el clic y ejecutarán su código. Intente agregar un event.stopPropagation() y vea cómo cambia.
PD: deberá obtener el objeto de event en su controlador de click :)
PPS, creo que comenzar a usar más console.log y, más pronto que tarde, familiarizarse con las herramientas de depuración lo ayudará enormemente. En este caso, agregar una instrucción console.log en el controlador de click , por ejemplo, le habría hecho preguntarse "¿por qué mi clic se activa en varios elementos?"