1

我从我的数据库中加载了多个图像，并且在每个图像的底部都有一个共享按钮...单击共享按钮时，会出现一个带有不同共享选项的新 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;
}

脚本

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

谢谢

4

4 回答 4

1

将您的 JS 更改为：

$(document).ready(function(){
   $(".share-holder").click(function(){
   $(this).next().fadeIn();
});
});
于 2013-01-29T09:39:14.783 回答
1 
$(document).ready(function(){
   $(".share-holder").click(function(){
    $(this).closest('.share-fadein').fadeIn();
 });
});

获取最接近.share-fadein点击的.share-holder.

请参阅最接近的（） jQuery。

于 2013-01-29T09:42:24.043 回答
1

如果使用 jQuery 1.4.3+ 更好用

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

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

于 2013-01-29T09:48:53.593 回答
0

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

$(".share-holder").click(function(){
    $(this).next(".share-fadein").fadeIn();
});     //--^^^^^^^^^^^^^^^^^^^^-------this will only fadesin the ".share-fadein"
于 2013-01-29T09:42:02.937 回答