jquery replaceWith смесь кавычек 'и'

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 атрибут в HTML, чтобы вставить и присоединить обработчик событий с помощью 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

Как насчет делать это программно удобный способ ..

Да, это больше строк кода, но имеет дополнительное преимущество, что вы можете сделать гораздо больше с определены объекты, и вы можете использовать контекстные переменные в обработчик кликов И ваш инспектор t будет намного чище.

$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>