1

画像をクリックして別のdivに画像の情報を表示する方法と、この画像をクリックすると情報が表示/非表示になります。

$(document).ready(function () {
    $(".cell").click(function () {
        $(this).find("span").toggle("slow");
    })
});



<div class="cell">
        <div class="inner">
          <span style="display:none;"> <img src="Images/sachin.jpg" alt="" width="180" height="180" /></span>  <span class="name">Sachin Tendulkar</span>
           <input type="hidden" class="friend_id" value="22 " />
        </div>
    </div>

特定の画像をクリックしたときに、その名前を別のdivに表示したい

4

2 に答える 2

1

私の理解が正しければ、あなたが求めているのは、画像をクリックしたときに名前が表示されることだと思いますか?

$(document).ready(function () {

    $(".inner>img").click(function () {
        $(this).parent().find("span").toggle("slow");
    })
});

​&lt;div class="cell">
    <div class="inner">
      <img src="Images/sachin.jpg" alt="" width="180" height="180" />  
      <span class="name" style="display: none;">Sachin Tendulkar</span>
      <input type="hidden" class="friend_id" value="22 " />
    </div>
</div> ​​​​​​​​​​​​​

画像の周囲を削除する再フォーマットされた html に注意してくださいspan(必須ではありません) と、画像と名前の範囲のスタイル属性を削除します。

于 2012-09-13T13:42:28.597 に答える
1

試す：

$(.cell).click(function() {
    $(this).toggle("slow");
    $(otherDiv).html( $(this).find('span.name').html() );
    // other processing ...
});

ただし、これは現在のコード用であり、少しクリーンアップする必要があります。以下を参照してください。

画像をラップするためにスパンは必要ありません。私は次の行に沿ってもっと何かを試してみます:

<div class="cell">
    <div class="inner">
        <img src="Images/sachin.jpg" data-name="Sachin Tendulkar" alt="" />
        <input type="hidden" name="22" class="friend_id" value="22" />
    </div>
</div>

一緒に：

$('.cell').click(function() {
    var img = $(this).find('img');
    $(img).toggle('slow');
    $(otherDiv).html( $(img).attr('data-name') );
    // other processing ...
});
于 2012-09-13T13:48:05.207 に答える