json 배열에서 다음 및 이전 값으로 이동하려면 어떻게해야합니까?

Question

나는 며칠 동안이 벽으로 내 머리를 벽에 치고 있었다. 나는 클릭 할 때 해당 개별 항목을 div로 옮기는 항목 목록을 가지고 있습니다. 어떤 항목을 클릭했는지에 따라 내 목록의 다음 항목과 이전 항목 (json)을 찾으려고합니다.

나는 이것에 대해 처음이야. 그리고 나는 내가 시도한 것에 상관없이 이것을 제대로 수행 할 수 없다.

여기에 jsfiddle code입니다. 감사!

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>​​ 

자바 스크립트 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

추가 바이올린 같은

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

체크 out..Hope u는 예상의 와트 ...

Answer 2

시도 뭔가

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