jquery replaceWith 混合引号 ' 和 "

Question

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

$('#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 省略要插入的 HTML 中过时的 onclick 属性并使用 JavaScript，像这样：

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

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

Answer 2

以一种编程友好的方式来做怎么样..

是的，它有更多的代码行，但它有一个额外的好处，即您可以使用定义的对象做更多的事情，并且您可以在点击处理程序中使用作用域变量，并且您的检查源将更加清晰。

    $myntamsloto = $('<li id="myntamsloto">');
    $myntamslotoLink = $('<a href="#">LogIn</a>');
    $myntamslotoLink.on('click',function() {
       $('html, body').animate({
                                  scrollTop: $('#login').offset().top
                               }, 
                               600);
    });
    $myntamsloto.append($myntamslotoLink);
    $('#myntamsloto').replaceWith($myntamsloto);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="login">login</button>
<div style="height:800px;background:green;width:20px;clear:both;"></div>
<ul>
<li>foo</li>
<li>bar</li>
<li id="myntamsloto">baz</li>
</ul>

jquery replaceWith 混合引号 ' 和 "

jquery replaceWith mixture of quotation marks ' and "

javascript

jquery

replacewith