的jQuery replaceWith混合和「

我已經寫了jQuery的幾行代碼，從一個鏈接列表取代了商品登錄，一個鏈接註銷，反之亦然。這也滾動頁面回到頂端我不得不使用單引號和雙引號的混合物顯然，這種代碼：的jQuery replaceWith混合和「

$('#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);

它的工作原理，但我從來沒有見過這個。

是否有這樣做的更優雅的方式？

來源

2016-03-02 Tony_Wh

你可以修改你的使用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>');

來源

2016-03-02 16:59:48

更優雅！謝謝 –

沒問題，很樂意幫忙 –

如何做一個編程友好的方式..

是的，它更多的代碼，但它有額外的好處，你可以做更多的事情與對象定義的，並且可以使用作用域變量點擊處理程序和你的inspec 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>

來源

2016-03-02 17:12:22 Tschallacka

的jQuery replaceWith混合和「

回答

相關問題