essayer de comprendre différents $ (ce) dans 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>

code ci-dessus est d'ici: http://www.1stwebdesigner.com/tutorials/jquery-beginners-4/

Question:

Pour cette ligne: $(this).parent().attr('id', 'singleimagedisplay').css('height', $(this).height()).siblings().hide();

1.I connaître les premiers moyens $(this) l'img qui a cliqué, mais qu'est-ce que sencond $(this) signifie?

2.Quand j'ai cliqué sur un img sur le frontend, je peux voir voir l'img être agrandi, et il montre style="height: 533px; dans firebug, mais comment se fait-il que 533px? dans le script css, il n'y a pas de définition telle que height: 533px.

Source

2013-06-19 user2294256

La seconde '$ (this)' devrait être le même élément ... – elclanrs

C'est le même élément, vous êtes toujours dans le même contexte ... – PSL

Le second $ (this) signifie également le même que le premier.

Ce qui se passe ici est, vous obtenez la elemet mère du cliqué img puis définissez les id-singleimagedisplay puis définissez sa hauteur à la hauteur du img qui a été cliqué (Cette obtient la hauteur rendu de l'image), puis cache tous les éléments frères des images parent

Source

2013-06-19 04:12:25

essayer de comprendre différents $ (ce) dans jquery

Répondre

Questions connexes