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将更简单（并且更好的做法）省略要插入的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混合引号＆＃39;和＆＃34;

2 个答案: