Soy muy nuevo en jQuery y JavaScript y quiero crear una función en la que pueda hacer clic en CUALQUIER objeto en mi página y ese objeto seleccionado luego debe desvanecerse o cambiar el estilo, etc. (el punto es que el clic debe ser específico al azar ).
Nada de lo que he intentado funciona, incluso cuando uso el selector seleccionado, aún debe ser específico para lo que quiero lograr. Por el momento logré que TODO se desvaneciera y no solo el objeto seleccionado.
Aquí está mi código:
$('*').click(function() { $(this).children().fadeOut( "slow" ); });Aquí está el resto del código, pero no creo que sea necesario.
$(document).ready(function () { alert("Welcome to my jQuery page. The page has finished loading"); document.getElementById('mainBd').style.backgroundImage = "url('/images/SoupyBlissfulHeron-max-1mb.gif')"; }); $("#lorem").hover(function () { $(this).css({ "background-color": "rgba(218, 243, 247, 0.5)", "color": "rgb(240, 119, 0)", "border-left": "5px solid #ccc", "font-size": "2em" }); }); $('*').click(function() { $(this).children().fadeOut( "slow" ); }); <!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"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <title>Document</title> </head> <body id="mainBd"> <div class="container"> <h1 class="h1 display-3"> Welcome To My jQuery Page. </h1> <p>Hover over the paragraph below to change its styling.</p> <p id="lorem"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sapiente iure, quod vitae veritatis reprehenderit expedita officia accusantium commodi delectus nihil, amet in. Fugiat aliquam veritatis eos sit esse autem! </p> <p> Click on any element to let it fade out. </p> </div> <script type="text/javascript" src="jQuery_Task.js"></script> </body> </html>Los eventos de jQuery "burbujean" en la parte superior del DOM, si no se evitan . Entonces puedes poner el oyente en el body .
El evento de clic tiene target que muestra exactamente en qué se hizo clic, así que utilícelo:
$(document).ready(function () { //alert("Welcome to my jQuery page. The page has finished loading"); $('#mainBd').css('backgroundImage', "url('/images/SoupyBlissfulHeron-max-1mb.gif')"); $("#lorem").hover(function () { $(this).css({ "background-color": "rgba(218, 243, 247, 0.5)", "color": "rgb(240, 119, 0)", "border-left": "5px solid #ccc", "font-size": "2em" }); }); $('body').click(function(event) { $(event.target).fadeOut( "slow" ); }); }); <!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"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <title>Document</title> </head> <body id="mainBd"> <div class="container"> <h1 class="h1 display-3"> Welcome To My jQuery Page. </h1> <p>Hover over the paragraph below to change its styling.</p> <p id="lorem"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sapiente iure, quod vitae veritatis reprehenderit expedita officia accusantium commodi delectus nihil, amet in. Fugiat aliquam veritatis eos sit esse autem! </p> <p> Click on any element to let it fade out. </p> </div> <script type="text/javascript" src="jQuery_Task.js"></script> </body> </html>