I’ve been beating my head against the wall with this one for days now.

Question

0

Asked: June 6, 20262026-06-06T00:03:46+00:00 2026-06-06T00:03:46+00:00

I’ve been beating my head against the wall with this one for days now.

0

I’ve been beating my head against the wall with this one for days now. I have a list of items that when clicked, will move that indivual item to a div. Based on which item is clicked, I’m trying to go the the Next and Previous items in my list (json).

I’m kind of new to this and I just can’t quite get this to work no matter what I try.

Here is the jsfiddle code. Thanks!

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


});