In my previous jQuery post about Animate Div Layer to Resume Original HTML Layout, there is only one image on the webpage layout. Therefore the image is surely the right target being selected.
However, there will be more than one product image in a real design. Therefore we need to know which image is the right target that is being clicked and acted upon.
Let’s take an example. There are two product images on the webpage layout. The situation now becomes:
Of course, you can assign different CSS class for each Div Layer containing the image. This is a possible solution. However this is not the best way. If there are 50 product images in a page, you have to assign and write CSS 50 classes.
Table of Contents
Using jQuery $(this)
The best way is using jQuery $(this). In brief, the current element being selected will be passed to a jQuery function as this. And by using $(this), this can be referred to the current element being selected.
Note:
To avoid conflict of variables, jQuery(this) is highly suggested for more complicated coding.
Here’s the jQuery codes of how it works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Handle Current Element With $(this)</title>
<style type="text/css">
<!--
h2 {
padding-bottom: 5px;
color: #039;
}
.frame {
//padding:5px;
border: 2px solid #000;
background-repeat: no-repeat;
background-position: right top;
background-image: url(sea.png);
height: 100px;
overflow: hidden;
width: 150px;
}
.left {
width:150px;
height:100px;
background-color:#FC0;
float: left;
}
.right {
width:150px;
height:100px;
background-color:#9C0;
float: right;
}
-->
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function() {
var targetElement = $(".frame");
targetElement.click(function() {
jQuery(this).animate( {"width": "+=150px"}, 1000 );
});
});
</script>
</head>
<body>
<h2>jQuery Handle Current Element With $(this)</h2>
<div>
<div style="float:left; margin-right:10px;">
<div><img src="test.png" width="150" height="100" />
</div>
<div>
This is the right side
</div>
</div>
<div>
<div><img src="test.png" width="150" height="100" />
</div>
<div>
This is the right side
</div>
</div>
</div>
</body>
</html>
Now, when visitors click on the 1st product image, the product info that product will be sliding out as we did in previous tutorial. And the 2nd image will be pushed away as expected.
If visitors click on the 2nd product image, the product info of 2nd product will be sliding out, as shown in the diagram below:
Therefore by using jQuery $(this) or jQuery(this), we can easily target the selected elements which are sharing the same class name.
Download jQuery Source Files:
Click here to download the jQuery source file
Of course, you also need to modify the codes a bit to make it works in a real webpage.
Another Example of Using jQuery(this)
Let’s take another example to illustrate how to use handle current selected element with jQuery(this).
There are three images layout on a webpage, as shown n the diagram below:
Take a look at the HTML and jQuery codes of this webpage:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Handle Current Selected Element with $(this) 2</title>
<style type="text/css">
<!--
h2 {
padding-left: 30px;
padding-bottom: 5px;
color: #039;
}
.frame {
position:relative;
width:540px;
padding:5px;
margin-top:5px;
left: 30px;
border: 4px solid #000;
background-repeat: no-repeat;
background-position: right top;
background-image: url(sea.png);
z-index: 0;
}
-->
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function() {
// Declare a variable for the selected element
var targetElement = $(".frame img");
targetElement.click(function() {
alert("The width is:" + $(this).width() );
});
});
</script>
</head>
<body>
<h2>jQuery Use $(this) to Select Current Selected Element</h2>
<div class="frame">
<img src="boat.png" width="203" height="190" />
<img src="sun.png" width="100" height="100" />
<img src="clouds.png" width="229" height="140" />
</div>
</body>
</html>
As you can see, the three images do not have unique ID. They are simply using the same <img> tag. The target element can be acting on any images:
var targetElement = $(".frame img");
How can we know which current image is being clicked? The magic is the using of $(this):
alert(“The width is:” + $(this).width() );
When clicking on the boat image, the width of boat will be shown:
When clicking on the sun image, the width of sun will be shown:
When clicking on the cloud image, the width of cloud will be shown:
By using the jQuery $(this), this is easy to target the current selected element:
Download jQuery Source Files:
Click here to download the jQuery source file
Again, you also need to modify the codes a bit to make it works in a real webpage.
Animation Effect Using jQuery(this)
Using the same technique, we can now creating some interesting animation with jQuery(this).
Change the above jQuery a little bit. We can hide the current selected element with the hide() method, as shown below:
// Declare a variable for the selected element
var targetElement = $(".frame img");
targetElement.click(function() {
//alert("The width is:" + $(this).width() );
$(this).hide(2000);
});
When clicking on the boat image, the boat will be hidden in 2 seconds:
The sun and cloud will also be hidden by clicking on them.
Download jQuery Source Files:
Click here to download the jQuery source file
Detect Current Button Clicked Using jQuery(this)
Another useful example is to detect the current button being clicked on. This is very useful if you have some buttons on the same page and wish to know which button is being clicked by a user.
Let’s take an example. There are two buttons on the webpage.
The codes of the webpage is:
<!DOCTYPE html>
<html>
<head>
<title>Detect Current Button Clicked Using jQuery(this)</title>
<link href="stylesheet.css" rel="stylesheet">
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var targetElement = $("#container button");
$('#container #btnSubmit').click(function() {
alert(jQuery(this).val());
});
});
</script>
</head>
<body>
<h1>Detect Current Button Clicked Using jQuery(this)</h2>
<div id="container">
<strong>Member Area</strong>
<form method="post" action="">
<button id="btnSubmit" value="gold" type="submit">Gold members</button>
<button id="btnSubmit" value="silver" type="submit">Silver members</button>
</form>
<p>Output Box</p>
<div id="outputBox">
<p>Display output here...</p>
<p> </p>
</div>
</div>
</body>
</html>
Actually the concept is the same. When a user click on the “Gold members” button, the value of the button (i.e. gold) will be shown:
And when a user click on the “Silver members” button, the value of the button (i.e. silver) will be shown:
This post discuss how to use jQuery handle current elements with jQuery(this).
Leave a Reply