javascript - 将此 jQuery 脚本用于多个 div

Question

所以我对 jQuery 完全陌生，目前只是在修修补补，我目前正在使用测试脚本(如下)我想要实现的是让图像在单击时 div 向下滑动并显示更多信息 -类似于新的谷歌图片效果。

下面脚本的问题是它在打开 div 时加载(我需要它在单击时打开)而且，这只适用于一个 div，我是否需要为多个 div 多次执行脚本？

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>
$(document).ready(function() {
     $('#clickme').click(function() {
          $('#me').animate({
               height: 'toggle'
               }, 500
          );
     });
});
</script>


<div id="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">
  Click here to toggle me in and out =)
</div>
<img id="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It&#039;s me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" />

Answer 1

首先，不能对多个元素使用同一个ID。相反，使用一个类。 jQuery 只会选择第一次出现的 ID，而忽略其余的。

其次，您需要为函数提供一些上下文 - 即 $(this).next() - 这是因为当您有多个元素时 clickme 类，浏览器将知道它必须选择 下一个 类为 me 的元素，而不是任何其他 .me 元素。

$(document).ready(function() {
    // Hide image onload
    $('.me').hide();

    // Provide context for each click event
    $('.clickme').click(function() {
         $(this).next('.me').animate({
              height: 'toggle'
              }, 500
         );
    });
});

HTML:

<div class="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">
  Click here to toggle me in and out =)
</div>
<img class="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It&#039;s me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" />