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 に答える