2

所以我对 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;" />
4

3 回答 3

2

首先，您不能对多个元素使用相同的 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;" />
于 2013-03-08T20:17:24.837 回答
1

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

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

<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;" />
于 2013-03-08T20:21:38.673 回答
0

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

其次，将此添加到document.ready块的开头

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

在这里提琴

于 2013-03-08T20:17:55.073 回答