使用JS变量将onclick ='location.href ='构造成HTML的正确语法

Question

我正在使用包含URL的名为sortedlist[i].description的var循环访问一些数据。我需要构建以下HTML输出：

<div onclick="location.href='http://XXXXXX' class="MusicItem">

我正在使用名为output的var构建我的HTML输出，该值会累积到我的页面的整个正文中。

output += '<div onclick="location.href="' + 
          sortedlist[i].description + '" class="MusicItem">';

上述当然打破了。我的引号用法/语法显然有问题，但我已经尝试过各种方式：

1. 交替单引号和双引号。
2. 仅使用单引号。和
3. 使用parens代替单引号等

什么都没有用。

Answer 1

你可以像这样逃避引号：

output += '<div onclick="location.href=\'' + sortedlist[i].description + '\'" class=\"MusicItem\"></div>';

生成以下字符串：

<div onclick="location.href='https://google.com'" class="MusicItem"></div><div onclick="location.href='http://stackoverflow.com'" class="MusicItem"></div>

Answer 2

试试这个

output += '<div class="MusicItem" data-url="'+sortedlist[i].description+'"></div>'

并附加像这样的点击事件

var item = document.querySelectorAll(".MusicItem");

    for(var i = 0;  i < item.length; i++){
        item[i].addEventListener("click", function(event){
            window.location.href = this.dataset.url;
        });
    }

或者如果您只想在点击事件上重定向到新页面，那么最好使用锚标记

Answer 3

可能的解决方案是

output += sortedlist.map(function(item){
    return '<a href="'+item.description+'" class="MusicItem">' 
});