有人知道如何使下面的“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>
最佳答案
要创建“链接”，您可能希望每个 li 元素内都有一个 anchor 元素，并且对于 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 内都有 anchor )。 $.each()“循环”遍历 treeObj.root 数组中的每个元素，创建一个带有 id 和 trackName，将其附加到新的 li 元素，并将其附加到 ul 元素。 .each() 完成后，新的 ul 将附加到您的树 div 中。
就链接样式而言，这取决于您执行所需的 CSS，但既然您提到删除文本装饰，您可能需要从以下内容开始:
#tree a { text-decoration : none; }
工作演示:http://jsfiddle.net/B2Zsv/
(如果 fiddle 中所示的代码和输出不是您正在寻找的东西，我建议您更新您的问题以显示您想要生成的所需输出 html。)
更新
我的原始代码的以下变体将轨道名称存储为创建的 anchor 上的属性，然后在单击时检索它们。
$(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/ 显示它)，但这向您展示了如何获取正确的文件名，因此您可以从那里算出看看怎么玩...
关于php - 让 json 中的每个 "li"成为它自己的链接？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10678170/