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> ​​​​​​​​​​​​​

注意删除span图像周围的重新格式化的 html（这不是必需的）以及图像和名称范围的样式属性。

于 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 回答