将json中的每个“li”设为自己的链接？答案

【问题标题】：Make each "li" from json it's own link?将json中的每个“li”设为自己的链接？
【发布时间】：2012-05-20 23:47:59
【问题描述】：

有谁知道如何使出现在以下“li”中的文本既是链接又可以通过 CSS 自定义？我无法删除文本装饰、更改字体样式、颜色等。我尝试更改“树”ID 的样式，但只能更改字体大小。

虽然两者都很重要，但链接至关重要。返回的每个“li”都需要是它自己的动态生成的链接。我现在已经尝试了大约 10 种不同的方法，但我似乎无法让它发挥作用。

 <script>

function to_ul(id) {

    var ul = document.createElement("ul");

  for (var i=0, n=id.length; i<n; i++) {

      var branch = id[i];

      var li = document.createElement("li");

        var text = document.createTextNode(branch.trackName);

        li.appendChild(text);

        ul.appendChild(li);

    }

    return ul;

}

function renderTree() {

  var treeEl = document.getElementById("tree");
        var treeObj = {"root":[{"id":"1","trackName":"Whippin Post"},{"id":"2","trackName":"Sweet Caroline"},{"id":"3","trackName":"Tears in Heaven"},{"id":"4","trackName":"Ain't She Sweet"},{"id":"5","trackName":"Octopus' Garden"},{"id":"6","trackName":"Teen Spirit"},{"id":"7","trackName":"Knockin on Heaven's Door"}]};

    treeEl.appendChild(to_ul(treeObj.root));

}

</script>

</head>

<body onload="renderTree()">

<div id="tree"></div>

</body>

</html>

更新

<script>
function to_ul(id) {
    var ul = document.createElement("ul");

  for (var i=0, n=id.length; i<n; i++) {

    var branch = id[i];

    var li = document.createElement("li");
    li.innerHTML = "<a href=" + "'#'" + "class='listAnchor'" + "onclick='changeText()'" + ">" + branch.trackName + "</a>"
    ul.appendChild(li);

    function changeText(){
    document.getElementById('player-digital-title').innerHTML = branch.trackFile;
    }
    }

    return ul;  
}

function renderTree() {
  var treeEl = document.getElementById("player-handwriting-title");

        var treeObj = {"root":[{"id":"1","trackName":"Whippin Post","trackFile":"test1.wma"},{"id":"2","trackName":"Sweet Caroline","trackFile":"test2.wma"},{"id":"3","trackName":"Tears in Heaven","trackFile":"test3.wma"},{"id":"4","trackName":"Ain't She Sweet","trackFile":"test4.wma"},{"id":"5","trackName":"Octopus' Garden","trackFile":"test5.wma"},{"id":"6","trackName":"Teen Spirit","trackFile":"test6.wma"},{"id":"7","trackName":"Knockin on Heaven's Door","trackFile":"test7.wma"}]};

    treeEl.appendChild(to_ul(treeObj.root));


    treeEl.appendChild(to_ul(treeObj.root));
}
</script>
</head>
<body>
<a href="#" class="genre" onclick="renderTree()">Click here</a>
<br/>
<br/>
<a href="#" id="player-handwriting-title"></a>
<br/>
<br/>
<div id="player-digital-title"></div>
</body>
</html>

【问题讨论】：

那么，你想让
样式在有人点击时改变？

【解决方案1】：

要创建一个“链接”，您可能需要在每个 li 元素内都有一个锚元素，并且对于 a 元素，您希望拥有您的数据中似乎没有的 href 属性。但举例来说，假设您想使用id 作为href，您可以这样做：

$(document).ready(function(){

  var treeObj = {"root":[{"id":"1","trackName":"Whippin Post"},{"id":"2","trackName":"Sweet Caroline"},{"id":"3","trackName":"Tears in Heaven"},{"id":"4","trackName":"Ain't She Sweet"},{"id":"5","trackName":"Octopus' Garden"},{"id":"6","trackName":"Teen Spirit"},{"id":"7","trackName":"Knockin on Heaven's Door"}]};

  var $ul = $("<ul></ul>");       
  $.each(treeObj.root,function(i,v) {
    $ul.append($("<li></li>").append(
                              $("<a></a>").attr("href",v.id).html(v.trackName)));
  });
  $("#tree").append($ul);
});

您的问题被标记为“jQuery”，所以我继续使用 jQuery 创建列表（每个 li 内都有锚点）。 $.each()“循环”遍历treeObj.root数组中的每个元素，用id和trackName创建一个元素，将它附加到一个新的li元素，并将它附加到一个ul元素。 .each() 完成后，新的 ul 将附加到您的树 div 中。

至于链接的样式，这取决于你来做你想要的 CSS，但既然你提到删除文本装饰，你可能想从这样的事情开始：

#tree a { text-decoration : none; }

工作演示：http://jsfiddle.net/B2Zsv/

（如果小提琴中显示的代码和输出不是您正在寻找的那种东西，我建议您更新您的问题以显示您想要生成的所需输出 html。）

更新

我的原始代码的以下变体将轨道名称作为属性存储在创建的锚点上，然后在单击时检索它们。

$(document).ready(function(){

    var treeObj = {"root":[{"id":"1","trackName":"Whippin Post","trackFile":"test1.wma"},{"id":"2","trackName":"Sweet Caroline","trackFile":"test2.wma"},{"id":"3","trackName":"Tears in Heaven","trackFile":"test3.wma"},{"id":"4","trackName":"Ain't She Sweet","trackFile":"test4.wma"},{"id":"5","trackName":"Octopus' Garden","trackFile":"test5.wma"},{"id":"6","trackName":"Teen Spirit","trackFile":"test6.wma"},{"id":"7","trackName":"Knockin on Heaven's Door","trackFile":"test7.wma"}]};

    var $ul = $("<ul></ul>");       
    $.each(treeObj.root,function(i,v) {
        $ul.append(
            $("<li></li>").append( $("<a></a>").attr({
                "href":v.id,"data-file":v.trackFile}).html(v.trackName) )
        );
    });
    $("#tree").append($ul);

    $("#tree a").click(function() {
      var trackname = $(this).html(),
          filename = $(this).attr("data-file");

      // here add your code to do something with filename and/or trackname

      return false;
    });
});

如您所见，我的点击处理程序在获取文件名后实际上并没有对文件名做任何事情（我更新后的演示 http://jsfiddle.net/B2Zsv/3/ 显示了它），但这向您展示了如何获取正确的文件名，因此您可以从那里知道怎么玩呢……

【讨论】：

这与我正在寻找的非常接近。我更新了问题，因为单击 li 链接时需要链接到文件名。不幸的是，我无法让这个例子在我的本地机器上工作。从 jsfiddle 迁移它时我缺少什么吗？
除了拥有一个 id 为“tree”的容器 div 之外，我的回答中显示了使小提琴工作所需的一切，所以我不知道你在本地机器上出了什么问题。抱歉，我没有时间弄清楚如何让文件为你播放，但我会更新我的答案，至少展示如何将文件名与链接相关联，以及如何在链接被点击。
这个解决方案效果很好，谢谢。抱歉，我花了这么长时间才回复。我最终在此基础上进行了一些构建，以便通过单击“流派”生成列表时。再次感谢您的帮助。

【解决方案2】：

首先在js中创建链接：

function to_ul(id) {

  var ul = document.createElement("ul");

  for (var i=0, n=id.length; i<n; i++) {

    var branch = id[i];
    var li = document.createElement("li");
    li.innerHTML = "<a href='wherever' class='listAnchor'>" + branch.trackName + "</a>"
    ul.appendChild(li);

  }
  return ul;
}

然后在css中设置样式：

<style>
  .listAnchor {
    text-decoration: none;
  }
</style>

【讨论】：

所有这些答案都很棒，但这个答案最接近我正在寻找的答案。还有一个问题：我正在尝试这样做，当我单击 li 时，文件的名称将在“正在播放”部分中生成，并且歌曲将播放。我已经更新了上面的代码来表示这一点。我想我已经接近了，但我无法从 json 输出中正确调用 trackFile。
javascript 没有块作用域，因此变量 branch 将在调用 changeText() 时发生变化。我的猜测是无论你点击什么，你都会用test7.wma替换player-digital-title。但是您应该为此提出另一个问题，因为您需要进行很多更改才能修复它（根据经验，不要在循环内定义函数，这总是很麻烦）。如果我的回答对您有帮助，您应该点击复选标记接受它:)

【解决方案3】：

要在li 元素中创建a 元素，只需应用代码中演示的相同技术即可：

函数 to_ul(id) {

var ul = document.createElement("ul");

for (var i = 0, n = id.length; i < n; i++) {

    var branch = id[i];

    var li = document.createElement("li"),
        a = document.createElement('a'); // create the `a`
    a.href = "http://example.com/"; // set the `href`

    var text = document.createTextNode(branch.trackName);
    a.appendChild(text); // append text to the a
    li.appendChild(a); // append the a to the li

    ul.appendChild(li);

}

return ul;

}

JS Fiddle demo.

要设置该链接的样式，您可以在文档中或在外部样式表中使用 CSS（与任何其他 CSS 一样）：

li a:link,
li a:visited {
    /* style the link's 'default' state */
}

li a:hover,
li a:active,
li a:focus {
    /* style the 'interactive' states of the links */
}

JS Fiddle demo.

当然，您可以直接在创建所述元素的 JavaScript 中应用样式，尽管这样做的代价是不必要的：

/* all the other stuff removed, for brevity */
    var li = document.createElement("li"),
        a = document.createElement('a'); // create the `a`
    a.href = "http://example.com/"; // set the `href`
    a.style.color = '#000';
    a.style.textDecoration = 'none';
    /* ...and other stuff... */

JS Fiddle demo.

这种方法除了昂贵之外，还缺乏设置:hover、:active、:visited 和:focus 样式的能力。

【讨论】：