Question

如何通过点击图像在另一个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中

Answer 1

如果我理解正确，我认为你要问的是当你点击它的图像时会显示这个名字？

$(document).ready(function () {

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

<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（没有必要）以及图像和名称范围的样式属性。

Answer 2

尝试：

$(.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 ...
});

如何通过使用jQuery单击图像来显示另一个div中的图像的一些信息？

2 个答案: