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>"
//                                                                                     ^^^

您还应该研究template literals：

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

转义几个单引号和双引号

2 个答案: