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)いますが、sencond とはどういう$(this)意味ですか?

2. フロントエンドで 1 つの画像をクリックすると、画像が拡大され、firebug に表示されるのstyle="height: 533px;がわかりますが、なぜ 533px なのですか? css スクリプトでは、 のような定義はありませんheight: 533px。

4

1 に答える 1

1

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

于 2013-06-19T04:12:25.750 に答える