1

データベースから複数の画像を読み込んでおり、各画像の下部に共有ボタンがあります...共有ボタンをクリックすると、新しい div がさまざまな共有オプションとともに表示されます。

私の問題は、共有ボタンを押すときです...ページ上のすべての画像に対して非表示のdivが表示され、すべてではなく1つの画像に対してのみ表示したいです。

これは私が今まで持っているものです：

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 
$(document).ready(function(){
   $(".share-holder").click(function(){
    $(this).closest('.share-fadein').fadeIn();
 });
});

.share-fadeinクリックされたものに最も近いものを取得します.share-holder。

closest（） 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 に答える
1

JS を次のように変更します。

$(document).ready(function(){
   $(".share-holder").click(function(){
   $(this).next().fadeIn();
});
});
于 2013-01-29T09:39:14.783 に答える
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 に答える