Question

我有一个if else语句。在<p>标签中的文本和可编辑<textarea>中的相同文本之间进行切换

问题在于：

您按下编辑按钮，脚本将p标签转换为textarea。文本可以用换行符很好地转换。
您按保存。再次将文本正确地转换回p标签。

您尝试再次按编辑键...但是这次，换行符被忽略了！？

var curState = "Ret";

if (curState == "Gem"){
        curState = "Ret";

        var p = btn.closest("div").find("textarea");

        var t = jQuery(this).closest("div").children("div").children('textarea').data();

        var ta = jQuery("<p/>", {
        "data": t
        });
        p.replaceWith(ta); 
}else{
        curState = "Gem";

        var p = jQuery(this).closest("div").find("p");

        var t = p.data()

        var ta = jQuery("<textarea/>", {
        "class": "editTextarea",
        "data": t
        });
        p.replaceWith(ta);
}

Answer 1

一种方法是从<p>中获取html并将其插入另一个容器，然后在replaceWith()上使用<br>并拉出修改后的html用作文本区域的值

简单的工作演示：

// create temporary element to insert the `<p>` html into
var $content = $('<div>').append($('p').html())
 // replace <br> tags
 $content.find('br').replaceWith('\n')
// set value using modified html
$('textarea').val( $content.html() )

p{border:2px solid #ccc; padding: 1em}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Line 1<br/><br><br/>Line 2
</p>
<textarea rows="10"></textarea>

Answer 2

您必须使用p而不是html()来检索data()元素的内容。

有了内容后，将<br>替换为\n：

var t = p.html()

var ta = jQuery("<textarea/>", {
    "class": "editTextarea"
});

ta.val(t.replace('<br>', '\n');

jQuery弄乱了换行符

2 个答案: