Javascript 试图理解jquery中的不同$（this） 演示 #画廊 { 宽度：960px； 保证金：0自动； } galleryitem先生 { 宽度：300px； 高度：300px； 浮动：左； 字体系列：Lucida Sans Unicode，Arial； 字体：斜体； 字体大小：13px； 边框：5px纯黑； 保证金：3倍； } .galleryitem img { 宽度：300px； } .galleryitem p { 文本缩进：15px； } #厨房壁炉 { 利润上限：-55px； 背景色：黑色； 不透明度：0.5； -moz不透明度：0.5； 过滤器：α（不透明度=50）； 高度：40px； 颜色：白色； 填充顶部：10px； } #单幅图像显示 { 宽度：800px； } #单图像显示 { 宽度：800px； } #单幅图像显示 { 浮动：对； 颜色：白色； }
田野上美丽的日落 海滩上有一些企鹅 太阳试图冲破云层 晴天的棕榈树 太阳从高高的草地上射进来 $（'p'）.hide（）； var galleryItems=$（'.galleryitem'）； galleryItems.css（'height'，'200px'）； var images=$（'.galleryitem'）。find（'img'）； 加列里项目悬停( 函数（）{ $（this.children（'p'）.show（）.attr（'id'，'galleryhoverp'）； }, 函数（）{ $（this.children（'p'）.hide（）.attr（'id'，''）； } ) 图像。单击（函数（）{ $（this.parent（）.attr（'id'，'singleimagedisplay'）.css（'height'，$（this.height（））.hide（））.hide（）； }) 以上代码来自此处： 问题: 对于此行：Javascript 试图理解jquery中的不同$（this） 演示 #画廊 { 宽度：960px； 保证金：0自动； } galleryitem先生 { 宽度：300px； 高度：300px； 浮动：左； 字体系列：Lucida Sans Unicode，Arial； 字体：斜体； 字体大小：13px； 边框：5px纯黑； 保证金：3倍； } .galleryitem img { 宽度：300px； } .galleryitem p { 文本缩进：15px； } #厨房壁炉 { 利润上限：-55px； 背景色：黑色； 不透明度：0.5； -moz不透明度：0.5； 过滤器：α（不透明度=50）； 高度：40px； 颜色：白色； 填充顶部：10px； } #单幅图像显示 { 宽度：800px； } #单图像显示 { 宽度：800px； } #单幅图像显示 { 浮动：对； 颜色：白色； },javascript,jquery,Javascript,Jquery,田野上美丽的日落 海滩上有一些企鹅 太阳试图冲破云层 晴天的棕榈树 太阳从高高的草地上射进来 $（'p'）.hide（）； var galleryItems=$（'.galleryitem'）； galleryItems.css（'height'，'200px'）； var images=$（'.galleryitem'）。find（'img'）； 加列里项目悬停( 函数（）{ $（this.children（'p'）.show（）.attr（'id'，'galleryhoverp'）；
$（this.parent（）.attr（'id'，'singleimagedisplay'）.css（'height'，$（this.height（））.sibbins（）.hide（）
1.我知道第一个$（此）
表示单击的img，但第二个$（此）
表示什么
2.当我点击前端的一个img时，我可以看到img被放大了，它在firebug中显示了style=“height:533px；
，但是它为什么是533px呢？在css脚本中，没有定义为height:533px
，第二个$（这）也意味着与第一个相同
这里发生的事情是，您将获得单击的img
的父元素，然后将id
设置为singleimagedisplay
，然后将其高度设置为单击的img
的高度（这将获得图像的渲染高度）然后隐藏图像父级的所有同级元素第二个$（此）
应该是相同的元素…它是相同的元素，您仍然处于相同的上下文中。。。
<!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>