javascript - 在 javascript jquery 中使用新行

Question

我在用

$('#'+type+'name'+id).hide().html('ghj').fadeIn(150);

哪个工作正常。但是当我使用

$('#'+type+'name'+id).hide().html('
A lot of html code
').fadeIn(150);

该功能不再起作用。因为我想保持函数整洁，所以我想把 HTML 放在多行中。为什么这不起作用？

编辑：仍然不起作用：

function Rename(type,id,content){
$('#'+type+'name'+id).hide().html(' '+
    '   <td height=\"20\" valign=\"middle\">'+
    '       <span onclick=\"RenameDo(\'notify\',\''+id+'\',''+content+'')\">'+
    '           <img title=\"Wijzigen\" class=\"LinkImage\" src=\"/common/images/save.png\">'+
    '       </span>'+
    '   </td>'+
    '   <td valign=\"middle\" rowspan=2>&nbsp;fghfgh</td>'+
' ').fadeIn(150);

}

Answer 1

只需用于+连接长字符串：

$('#'+type+'name'+id).hide().html(' ' + 
'A lot of html code' +
' ').fadeIn(150);

或使用\转义换行符：

$('#'+type+'name'+id).hide().html('\
A lot of html code\
').fadeIn(150);

---

更新

对于特定的字符串，使用这个：

function Rename(type,id,content){
    $('#'+type+'name'+id).hide().html(' '+
        '   <td height="20" valign="middle">'+
        '       <span onclick="RenameDo(\'notify\',\'' + id + '\',\'' + content + '\')">' +
        '           <img title="Wijzigen" class="LinkImage" src="/common/images/save.png">'+
        '       </span>'+
        '   </td>'+
        '   <td valign="middle" rowspan=2>&nbsp;fghfgh</td>'+
    ' ').fadeIn(150);
}

Answer 2

有两种方法可以做到这一点，“无论如何都可以使用的黑客方式”和“正确的方式”。

破解方式：

$("#"+type+"name"+id).hide().html("\
A lot of html code\
").fadeIn(150)

说明：通过在行尾添加反斜杠，您实际上是在“转义”换行符，因此它被忽略而不是未终止的字符串常量。

合适的方式：

$("#"+type+"name"+id).hide().html(
"A lot of html code\n"
+"Just adding some more\n"
+"Because whitespace outside of strings is fine."
).fadeIn(150)