Question

我已经用这个打了几天我的头撞墙了好几天了。我有一个项目列表，当点击时，将该个别项目移动到div。根据点击的项目，我正在尝试使用列表中的下一个和上一个项目（json）。

我对此并不熟悉，无论我尝试什么，我都无法完成这项工作。

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 ;
    });


});

Answer 1

尝试类似

的内容

    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 ;
    });

Answer 2

添加了小提琴

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

退房..希望它的预期......

如何转到json数组中的Next和Previous值？

2 个答案: