Javascript - 斜杠被空格替换

Question

我正在尝试通过 javascript 在我的 html 代码中创建一个 li 元素。这个 li 会有一个 onclick 函数。问题是尝试将文件路径作为参数传递给 loadDoc2() 函数时，会出现一些问题。我包括代码。

    function myFunction(){ 
          var x = "NEW";
          var file = "'/static/BRANDS/PERLA/NEW COL/XML Files/NEW COL.xml'";
          lis = "<li><a onclick='loadXMLDoc2(" + file + ")'>" + x + "</a></li>";
          document.getElementById("demo").innerHTML = lis;
        }

这给了我 <a onclick="loadXMLDoc2(" static brands perla new col xml files new col.xml')'>NEW</a> .斜杠由空格代替，字母小写。我需要的结果是 <a onclick="loadXMLDoc2('/static/BRANDS/PERLA/NEW COL/XML Files/NEW COL.xml')">NEW</a> 我已经尝试了很多东西，例如 .replace("\", "//") 但它没有用。

Answer 1

发生这种情况是因为您以 ' 开始您的 onclick，而文件的开头有一个 '，因此它关闭了 onclick 属性。所以看起来像

<li><a onclick='loadXMLDoc2('/static/BRANDS/PERLA/NEW COL/XML Files/NEW COL.xml')'>NEW</a></li>

我建议你使用javascript来绑定(bind)事件，它会更容易。

function myFunction(){ 
      var x = "NEW";
      var file = "/static/BRANDS/PERLA/NEW COL/XML Files/NEW COL.xml";
      var li = document.createElement('li');
      var a = document.createElement('a');
      a.innerHTML = x;
      a.onclick = function(){
          loadXMLDoc2(file);
      }
      li.appendChild(a);
      document.getElementById("demo").appendChild(li);
}