試圖在jQuery的

<!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/試圖在jQuery的

問：

對於此行：$(this).parent().attr('id', 'singleimagedisplay').css('height', $(this).height()).siblings().hide();

1.I知道第一$(this)手段點擊了img，但是sencond $(this)是什麼意思？

2.when當我點擊前端的一個img時，我可以看到img得到放大，並且它在螢火蟲中顯示style="height: 533px;，但它怎麼會是533px？在css腳本中，沒有像height: 533px這樣的定義。

來源

2013-06-19 user2294256

第二個'$（this）'應該是相同的元素... – elclanrs

它是相同的元素，您仍處於相同的上下文中... – PSL

第二個$（this）也表示與第一個相同。

這是怎麼回事這裏，你所得到的點擊img的父elemet然後設置id到singleimagedisplay然後設置其高度被點擊的img的heigth（這獲取圖像的渲染高），然後隱藏圖像父親的所有兄弟元素

來源

2013-06-19 04:12:25

試圖在jQuery的

回答

相關問題