I'm very new to jQuery and JavaScript and want to create a function where I can click on ANY object on my page and that selected object then needs to fade or change styling, etc. (the point is the click needs to be randomly specific).
Nothing I've tried is working, even when using the :selected selector it still needs to be specific for what I want to achieve. At the moment I managed to make EVERYTHING fade and not just the selected object.
Here is my code:
$('*').click(function() {
$(this).children().fadeOut( "slow" );
});
Here is the rest of the code, but I don't think is is needed.
$(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>jQuery events "bubble" to top of DOM, if not prevented. So you can just put listener on body.
Click event has target that show what exactly was clicked, so use that:
$(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>