Question

有人知道如何使下面“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>

Answer 1

首先在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>

Answer 2

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

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"),
        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（与任何其他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样式的功能。

Answer 3

要创建一个“链接”，大概你想要在每个li元素中都有一个锚元素，对于一个元素，你想要拥有你在数据中似乎没有的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/显示它），但是这会告诉你如何从那里获得正确的文件名可以弄明白怎么玩......

从json自己的链接制作每个“li”？

3 个答案: