Question

我从我的数据库加载了多个图像，并且在每个图像的底部我有一个共享按钮...当单击共享按钮时，会出现一个带有不同共享选项的新div。

我的问题是，当我按下分享按钮时......页面上的所有图像都会显示隐藏的div，而我想只显示一张图片，而不是所有图像。

这就是我现在所拥有的：

HTML

<div id="wrapper">
    <a href="<?php echo $link; ?>"><img class="img-box" src="/images/<?php echo $img; ?>.jpg"></a>
    <div class="share-holder" name="<?php echo $img_id; ?>">share</div>
    <div class="share-fadein"></div>
</div>

CSS

.share-fadein{
    width:210px;
    height:40px;
    background-color:#eee ;
    display:none;
}

SCRIPT

$(document).ready(function(){
    $(".share-holder").click(function(){
        $(".share-fadein").fadeIn();
    });
});

谢谢

Answer 1

将您的JS更改为：

$(document).ready(function(){
   $(".share-holder").click(function(){
   $(this).next().fadeIn();
});
});

Answer 2

$(document).ready(function(){
   $(".share-holder").click(function(){
    $(this).closest('.share-fadein').fadeIn();
 });
});

获得与点击的.share-fadein最接近的.share-holder。

参见closest() jQuery。

Answer 3

如果使用jQuery 1.4.3+更好地使用

$(document).ready(function(){
  $(this).delegate(".share-holder", "click", function() {
    $(this).next().fadeIn();
  });
});

Delegate更好，因为每个元素不是“点击”侦听器，而是有1个侦听器 - 因此内存使用率要低得多。

Answer 4

使用这种方式：http://jsfiddle.net/9Wsfc/

$(".share-holder").click(function(){
    $(this).next(".share-fadein").fadeIn();
});     //--^^^^^^^^^^^^^^^^^^^^-------this will only fadesin the ".share-fadein"

jquery淡入多个div

4 个答案: