javascript - jquery ReplaceWith 混合引号 ' and "

Question

我编写了几行 JQuery 代码，将列表中的项目从登录链接替换为注销链接，反之亦然。它还会将页面滚动回顶部。我不得不混合使用单引号和双引号。显然，这段代码:

$('#myntamsloti').replaceWith("<li id="myntamsloto"><a href="#" onClick="javascript: $('html, body').animate({scrollTop: $('#login').offset().top}, 600);">LogIn</a></li>");

给出错误，因为第一组引号被解释为语句的结尾。切换它们会延长命令，但我找不到允许运行整行的组合。所以，我已经砍掉了这条线:

var htmlinsert = '<li id="myntamsloto"><a href="#" onClick="javascript: ';
htmlinsert = htmlinsert + "$('html, body').animate({scrollTop:$('#login').offset().top}, 600);";
htmlinsert = htmlinsert + '">LogIn</a></li>';

$('#myntamsloti').replaceWith(htmlinsert);

它有效，但我从未见过这个。

有更优雅的方法吗？

Answer 1

您可以使用 replaceWith() 修改单行代码以使用正确的引号。您需要使用不同的引号来分隔字符串及其中的属性，然后转义内部引号，它们必须与分隔字符串的引号相匹配。试试这个:

$('#myntamsloti').replaceWith('<li id="myntamsloto"><a href="#" onclick="javascript: $(\'html, body\').animate({scrollTop: $(\'#login\').offset().top}, 600);">LogIn</a></li>');

也就是说，在要插入的 HTML 中省略过时的 onclick 属性并使用 JavaScript 附加事件处理程序，HTML 会更简单(也是更好的做法)，如下所示:

$(document).on('click', '#myntamsloto', function(e) {
    $('html, body').animate({
        scrollTop: $('#login').offset().top
    }, 600);
});

$('#myntamsloti').replaceWith('<li id="myntamsloto"><a href="#">LogIn</a></li>');