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、データにないように見える属性が必要です。idしかし、例として、 をas として使用したいと仮定すると、次のようにする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配列内の各要素を繰り返し処理し、 idandを使用して a 要素を作成し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/が表示されます) が、正しいファイル名を取得する方法を示しています。そこから遊び方を考えていきます...

于 2012-05-21T00:06:37.507 に答える