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>

以上代码来自：http://www.1stwebdesigner.com/tutorials/jquery-beginners-4/

问题：

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

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

2.当我点击前端的一个img时，我可以看到img被放大了，它在firebug中显示style="height: 533px;，但是为什么它是533px？在css脚本中，没有height: 533px这样的定义。

Answer 1

第二个$（this）也与第一个相同。

这里发生的是，您获得所点击的img的父元素，然后将id设置为singleimagedisplay，然后将其高度设置为{{1}的高度被点击的（这会获得图像的渲染高度）然后隐藏图像父级的所有兄弟元素

试图在jquery中理解不同的$（this）

1 个答案: