Question

我有两个div标签：一个包含img标签，另一个包含其他标签。

我的第一张<div>包含一张图片。当我点击该图片或某个<div>代码为insideFrameimg时，它应显示第二个<div id="insideFrameobj" style="display:none;">代替<div id="insideFrameimg">。

<div id="insideFrameimg"><!-- first div-->
  <img src="my-image.png"/>
<div>

<div id="insideFrameobj"> <!--second div -->
  hello this is my description
</div>

当我点击使用jQuery在<div id="insideFrameobj">中找到的<div>时，我希望显示<img>的完整内部html代替第一个<div id="insideFrameimg">。

Answer 1

<div id="insideFrameimg"><!-- first div-->
  <img id="imgClick" src=""/>
  <div>

  <div id="insideFrameobj"> <!--second div -->
       hello this is my description>
   </div>

这样的事情应该会有所帮助。它将用第二个div内容替换第一个div内容。

$('#imgClick').click(function () {
 $('#insideFrameimg').html($('#insideFrameobj').html());

});

Answer 2

您可以使用children功能获取insideFrameobj的所有孩子，并使用append功能将其移至insideFrameimg。这通常比使用innerHTML（或其jQuery包装器html）更好，因为您没有拆除元素并重新创建它们（这会丢失它们的事件处理程序）。它也更有效率。

这看起来像这样：

$("#insideFrameimg").click(function() {
    $(this).append($("#insideFrameobj").children());
});

当然这会让insideFrameobj变空，这似乎就是你想要的。如果不这样做，您可以clone孩子并附加克隆：

$("#insideFrameimg").click(function() {
    $(this).append($("#insideFrameobj").children().clone());
//                           difference is here ---^
});

但是，如果任何一个孩子都有id个值，那么克隆他们并添加克隆会导致文档无效，因为id 必须是唯一的。（这不仅仅是一个理论问题;如果您使用这些ID，它将导致您的页面出现问题。）

Answer 3

单击div时，只需替换img的内容：

$('#insideFrameimg img').click(function() {
    var contents = $('#insideFrameobj').html();
    $('#insideFrameimg').html(contents);
});

如何通过jquery将一个<div>的内部html替换为另一个</div>

3 个答案: