trying to understand different $(this) in jquery
Question
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<style type="text/css">
#gallery
{
width: 960px;
margin: 0 auto;
}
.galleryitem
{
width: 300px;
height: 300px;
float: left;
font-family: Lucida Sans Unicode, Arial;
font-style: italic;
font-size: 13px;
border: 5px solid black;
margin: 3px;
}
.galleryitem img
{
width: 300px;
}
.galleryitem p
{
text-indent: 15px;
}
#galleryhoverp
{
margin-top: -55px;
background-color: black;
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
height: 40px;
color: white;
padding-top: 10px;
}
#singleimagedisplay
{
width: 800px;
}
#singleimagedisplay img
{
width: 800px;
}
#singleimagedisplay a
{
float: right;
color: white;
}
</style>
</head>
<body>
<div id="gallery">
<div class="galleryitem">
<img src="computer1.png" alt="A beautiful Sunset over a field" /><p>
A beautiful Sunset over a field</p>
</div>
<div class="galleryitem">
<img src="computer2.png" alt="Some penguins on the beach" /><p>
Some penguins on the beach</p>
</div>
<div class="galleryitem">
<img src="computer3.png" alt="The sun trying to break through the clouds" /><p>
The sun trying to break through the clouds</p>
</div>
<div class="galleryitem">
<img src="computer.png" alt="Palm tress on a sunny day" /><p>
Palm tress on a sunny day</p>
</div>
<div class="galleryitem">
<img src="computer4.png" alt="The sun bursting through the tall grass" /><p>
The sun bursting through the tall grass</p>
</div>
</div>
</body>
</html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$('p').hide();
var galleryItems = $('.galleryitem');
galleryItems.css('height', '200px');
var images = $('.galleryitem').find('img');
galleryItems.hover(
function () {
$(this).children('p').show().attr('id', 'galleryhoverp');
},
function () {
$(this).children('p').hide().attr('id', '');
}
)
images.click(function () {
$(this).parent().attr('id', 'singleimagedisplay').css('height', $(this).height()).siblings().hide();
})
</script>
Above code is from here: http://www.1stwebdesigner.com/tutorials/jquery-beginners-4/
Question:
For this line: $(this).parent().attr('id', 'singleimagedisplay').css('height', $(this).height()).siblings().hide();
1.I know the first $(this) means the img that clicked, but what does sencond $(this) mean?
2.when I clicked one img on the frontend, I can see see the img get enlarged, and it shows style="height: 533px; in firebug, but how come it is 533px? in css script, there is no such definition as height: 533px .
1 answers
solution1
1 ACCPTED 2013-06-19 04:12:25
The second $(this) also means the same as the first one.
What is happening here is, you are getting the parent elemet of the clicked img then set the id to singleimagedisplay then set its height to the heigth of the img that was clicked(This gets the rendered hight of the image) then hides all the sibling elements of the images parent
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.