Estoy tratando de crear una función jQuery para desvanecer cualquier elemento específico en el que el usuario haga clic dentro de la página web.
Intenté usar el selector universal para apuntar a todos los elementos, pero luego, cuando hago clic en un elemento, todos los elementos de la página se desvanecen. Estoy tratando de desvanecer solo el elemento en el que se hizo clic y el resto de la página permanece.
Estaba pensando en agregar un detector de eventos a todos los elementos de la página y luego eliminar el nodo principal del elemento en el que se hizo clic.
Aquí está mi código hasta ahora:
$("*").click(function () { $("*").fadeOut(3000); });Así que sí, esa es la función que ya he creado.
<!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" /> <title>Ikigai</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="restaurant.js" type="text/javascript"></script> <link rel="stylesheet" href="restaurant.css" /> <style> @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100&display=swap"); </style> </head> <body> <img class="background" class="fade" src="restaurant.jpg" style="display: none" /> <h1 class="heading" class="fade">Ikigai</h1> <div class="container"> <h1 class="story" class="fade">Our Story</h1> <p class="story-p" class="fade">TEST</p> <img class="storyPic" class="fade" src="/pexels-kaboompics-com-6267.jpg" /> <h1 class="food" class="fade">Our Food</h1> <p class="food-p" class="fade">TEST</p> <img class="foodPic" class="fade" src="/pexels-huy-phan-1409050.jpg" /> <h1 class="people" class="fade">Our People</h1> <p class="people-p" class="fade">TEST</p> <img class="peoplePic" class="fade" src="/pexels-cottonbro-4253300.jpg" /> </div> </body> </html>¡Arriba está el html que estoy buscando manipular!
Algunas ideas ?
Gracias
Puedes cambiar algunas cosas para que tu código funcione
.on() para vincular la función de clic a todos los elementos ( diferencia entre .on('click') y .click() ) No es obligatorio, pero es una buena práctica$(this) para apuntar al elemento en el que se hizo clice.stopPropagation(); para evitar el burbujeo de eventosCódigo de trabajo a continuación
(Haga clic en cualquier elemento) [si hace clic en el área de la página, toda la página se desvanecerá, así que intente hacer clic en los elementos para ver el efecto]
$("*").on('click', function(e) { e.stopPropagation(); $(this).fadeOut(1000); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>I am a Div</div> <ul> <li> list 1 </li> <li> list 1 </li> </ul>Puede usar $(this) para referirse al elemento en el que se hizo clic, por lo que podría convertirse en:
$(this).parent().fadeOut(3000)Tendrá que apuntar al elemento en el que se hizo clic. Porque el evento de clic se propaga, lo que da como resultado que se ejecute el controlador de eventos para cada elemento. Propagación de eventos
Entonces, para lograr lo que desea, deberá evitar que el evento se propague. A continuación se muestra una muestra de trabajo de esto.
// thi statement attaches a click event hadler with every element $("*").click(function($event) { // below statement stops the event from propagation $event.stopPropagation(); // below statement fades the clicked element out $(this).fadeOut(3000); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> first div</div> <div> second div</div> <div> third div</div> <div> fourth div</div>