0 
<!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>

上面的代码来自这里：http ://www.1stwebdesigner.com/tutorials/jquery-beginners-4/

问题：

对于这一行： $(this).parent().attr('id', 'singleimagedisplay').css('height', $(this).height()).siblings().hide();

1.我知道第一个$(this)意思是点击的img，但是第二个是什么$(this)意思？

2.我在前端点击了一张img，可以看到img被放大了，而且style="height: 533px;在firebug中也有显示，但是怎么是533px呢？在 css 脚本中，没有height: 533px.

4

1 回答 1

1

第二个 $(this) 的含义也与第一个相同。

这里发生的是，您正在获取单击的父元素然后将其img设置id为singleimagedisplay然后将其高度设置为img被单击的高度（这将获取图像的渲染高度）然后隐藏图像的所有兄弟元素父母

于 2013-06-19T04:12:25.750 回答