試圖理解jQuery中的不同$（this）

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，但是第二個$(this)是什么意思？

2.當我單擊前端的一個img時，可以看到img變大了，並且在firebug中顯示了style="height: 533px;但是在CSS腳本中它卻變成了533px ?，沒有這樣的定義height: 533px 。

Answer 1

第二個$（this）的含義也與第一個相同。

這是在發生什么，您正在獲取被單擊的img的父singleimagedisplay然后將id設置為singleimagedisplay然后將其高度設置為被單擊的img的高度（這將獲得圖像的渲染高度），然后隱藏所有同級對象圖像父元素

試圖理解jQuery中的不同$（this）

問題描述

1 個解決方案

解決方案1
1 已采納 2013-06-19 04:12:25

試圖理解jQuery中的不同$（this）

問題描述

1 個解決方案

解決方案1 1 已采納 2013-06-19 04:12:25

解決方案1
1 已采納 2013-06-19 04:12:25