1

有谁知道如何使出现在以下“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>
4

3 回答 3

0

首先在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>
于 2012-05-20T23:55:47.230 回答
0

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

功能 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 小提琴演示。

要设置该链接的样式，您可以在文档中或外部样式表中使用 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 小提琴演示。

当然，您可以直接在创建所述元素的 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 小提琴演示。

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

于 2012-05-20T23:56:30.720 回答
0

要建立一个“链接”，您可能需要在每个 li 元素内都有一个锚元素，并且对于 a 元素，您希望href拥有您的数据中似乎没有的属性。但是作为示例，假设您想使用idas ，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()循环”遍历数组中的每个元素，使用andtreeObj.root创建一个元素，将其附加到新的 li 元素，并将其附加到 ul 元素。完成后，新的 ul 将附加到您的树 div 中。idtrackName.each()

至于链接的样式，这取决于你做你想要的 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/显示它），但这向您展示了如何获得正确的文件名所以从那里你可以弄清楚如何玩它......

于 2012-05-21T00:06:37.507 回答