Question

我有一个带图像的div容器。它有一个"data-src"

$("button").click(function() {
  $("div").html("<textarea>" + $("div").html() + "</textarea>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img dat-src="image.jpg" data-src="px.gif" />
</div>

<button>Click to edit</button>

单击按钮后，div替换为文本区域，其中的图像没有data-src

如何解决此问题？

我希望图像在新文本区域中按原样显示

结果

   <div>
        <img src="image.jpg" />
   </div>

Answer 1

改为使用wrap()。

$("button").click(function() {
  $("div").children().wrap("<textarea>");
  $("pre").text($('section').html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section>
<div>
  <img dat-src="image.jpg" data-src="px.gif" />
</div>
</section>

<pre></pre>

<button>Click to edit</button>

更改为：

<div>
   <textarea><img dat-src="image.jpg" data-src="px.gif"></textarea>
</div>

它的功能完全符合您的要求，但是实际上是无效的，因为浏览器不会重新解析它。但是，如果您要设置文本区域的 content ，则这不是正确的方法。正确的方法是：

$("button").click(function() {
  var $div = $("div");
  var text = $div.html();
  var $textarea = $('<textarea></textarea>');
  $textarea.appendTo($div).val(text);
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section>
<div>
  <img dat-src="image.jpg" data-src="px.gif" />
</div>
</section>


<button>Click to edit</button>

Textarea从HTML内容jQuery中删除data-src

1 个答案: