转义几个单引号和双引号

Question

我在尝试转义几个引号时遇到了麻烦。

这是我的代码：

var somevalue = "test";
return $("<li onclick='document.getElementById(\"AddGenre\").value = " + '\'' + somevalue + '\'' ";'><div><img src='" + item.img + "'><span>" + somevalue + "</span></div></li>").appendTo(ul);

我收到以下错误：

参数列表后未捕获到的SyntaxError：缺少）

Answer 1

您错过了+

"<li onclick='document.getElementById(\"AddGenre\").value = " + '\'' + somevalue + '\'' + ";'><div><img src='" + item.img + "'><span>" + somevalue + "</span></div></li>"
//                                                                                     ^^^

您还应该研究模板文字 ：

`<span>${myValue} and some quotes " ' "" ' '' no escapes needed</span`

Answer 2

当有人单击一个新添加的列表项时，我不确定是否要为AddGenre分配什么值-但是，如果我正确地认为该值应为'test' ，则此代码完全可以做到这一点方式。

我首先尝试避免使用嵌套引号，而主要功能是通过一次将元素添加到DOM来实现的。 几个辅助函数使它看起来更干净。

注意：运行代码片段时，请单击“整页”。 （否则，SO的控制台会掩盖呈现的DOM的一部分。）

 var genresList = document.getElementById("genresList"); var AddGenre = document.getElementById("AddGenre"); appendLi("test"); console.log(genresList.outerHTML.split("><").join(">\\n<")); // Main function function appendLi(someValue){ // Defines elements const li = create("li"), div = create("div"), img = create("img"), span = create("span"); // Modifies elements span.innerHTML = someValue; img.setAttribute("src","item.img"); li.dataset.addGenre = `'${someValue}'`; // Stores value to use when li is clicked li.addEventListener("click", updateAddGenre); // Defines click listener // Appends elements to the DOM append(li, img); append(li, span); append(div, li); append(genresList, li); } // Handles clicks on added list items function updateAddGenre(event){ AddGenre.value = event.currentTarget.dataset.addGenre } // Sugar function create(tagName){ return document.createElement(tagName); } function append(parent, node){ parent.appendChild(node); } 

 <h5>AddGenres:</h5> <input id="AddGenre" /> <h5>Genres List:</h5> <ul id="genresList"></ul>