2

几天来，我一直在用这个把头撞到墙上。我有一个项目列表，单击时会将单个项目移动到 div。根据单击的项目，我正在尝试转到列表中的下一个和上一个项目（json）。

我对此有点陌生，无论我尝试什么，我都无法让它发挥作用。

这是jsfiddle 代码。谢谢！

HTML：

<audio id="audio-player" name="audio-player" src="" ></audio>

<a id="next-bt" href="#">
<div class="player-musicnav-ff-column3">
    <ul class="musicnav-ff">
        <li class="ff">NEXT</li>
    </ul>
</div>
</a>

<a id="prev-bt" href="#">
<div class="player-musicnav-ff-column3">
    <ul class="musicnav-ff">
        <li class="ff">PREV</li>
    </ul>
</div>
</a>

<br/>
<br/>
<div id="player-digital-title">
</div>
<br/>
<br/>
<a href="#" id='player-handwriting-title'></a>​​

Javascript 一个 Jquery：

$(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,"data-file":v.trackFile})
               .html(v.trackName)
                                                     )
            );

    });
    $("#player-handwriting-title").empty().append($ul);

     $("#player-handwriting-title a").click(function() {
      var name = $(this).html(),
          filename = $(this).attr("data-file");
          filename2 = "upload-form/upload/" + filename;
        $('#player-digital-title').html($(this).html());

        document.getElementById('audio-player').src =   filename2;
        $("#audio-player")[0].play();
        return false;

    }); 

var myID = 0;
$("#next-bt").click(function() {
document.getElementById('player-digital-title').innerHTML =  treeObj.root[++myID].trackName ;
    });

var mylease = 6;
$("#prev-bt").click(function() {
document.getElementById('player-digital-title').innerHTML =  treeObj.root[--mylease].trackName ;
    });


});

​</p>

4

2 回答 2

0

尝试类似的东西

    var myID = 0;
$("#next-bt").click(function() {
  myID++;
  if(myID > treeObj.root.length) { myID = 0; }
document.getElementById('player-digital-title').innerHTML =  treeObj.root[++myID].trackName ;
    });

var mylease = 6;
$("#prev-bt").click(function() {
  myID--;
  if(myID < 0) { myID = treeObj.root.length; }
document.getElementById('player-digital-title').innerHTML =  treeObj.root[--mylease].trackName ;
    });
于 2012-06-15T06:59:17.740 回答
0

添加了一个小提琴

http://jsfiddle.net/kabichill/JzL97/

看看..希望它是你所期望的...

于 2012-06-15T07:13:46.260 回答