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类的元素时，浏览器会知道它必须选择 next 出现的元素，其类为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;" />

Answer 2

要开始隐藏div，您可以使用内联样式或（最好）display: none元素或CSS文件将其设置为<style>。

然后你可以使用类和相对定位来实现你想要做的事情：

<script>
$(document).ready(function() {
     $('img.clickable').click(function() {
          $(this).prev('.image-info').first().animate({
               height: 'toggle'
               }, 500
          );
     });
});
</script>


<div style="background-color: #333333; color: #FFFFFF; 
      padding: 10px; width: 200px; cursor:pointer; display:none;" 
      class="image-info">
  Info about the image you clicked
</div>
<img 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 clickable" style="border: none;" />

Answer 3

执行上述评论者建议的内容，并将图像更改为基于类的方法。

其次，将其添加到document.ready块

的开头

$('.me').hide();

Fiddle here

将此jQuery脚本用于多个div

3 个答案: