Question

我有一个上一个和下一个链接，它将文本附加到div，但我一直试图找出如何从treeObj追加到ul。我似乎也无法在第一个ID上启动页面。它开始是空白的。

  $("#next-bt").click(function() {
    $('.tracks').removeClass('selected');
    clickedID++;

    if (clickedID > lastIndex)
      clickedID = firstIndex;
    $('#' + (clickedID) + '_tracks').addClass('selected');
    document.getElementById('player-digital-title').innerHTML = treeObj.root[clickedID - 1].trackName;


  });

https://jsfiddle.net/5f4uzokf/

Answer 1

由于您已经控制了clickedID / next-btn处理程序中的prev-btn，因此您可以在那里禁用链接，而不是仅重置它。

工作jsFiddle：http://jsfiddle.net/LLf2c0hp/1/

此外，您不需要混合使用纯JavaScript和jQuery，除非我没有看到原因。

例如，而不是

document.getElementById('player-digital-title').innerHTML = treeObj.root[clickedID - 1].trackName;

你可以做到

$('div#player-digital-title').html(treeObj.root[clickedID - 1].trackName);

Answer 2

您可以在文档准备中手动触发 Next button ：

$("#next-bt").click();

您可以在处理程序中添加条件以取消事件：

if(clickedID > lastIndex)
{
    clickedID--;
    $("#next-bt").css('cursor', 'default');
    $('#' + (clickedID) + '_tracks').addClass('selected');
    document.getElementById('player-digital-title').innerHTML = treeObj.root[clickedID - 1].trackName;
    return;
}

这里是DEMO。

Answer 3

我注意到您没有将ul元素及其子li元素附加到页面上，这就是为什么它不起作用。我改变了这个以及其他一些小东西。以下是您的更新代码。我希望你觉得没问题： - ）

更新

＆＃13;

$(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"
    }, {
      "id": "8",
      "trackName": "Whales"
    }]
  };

  var clickedID = 1;
  var count = treeObj.root.length;
  var firstIndex = 0,
    lastIndex = 0;
  var $ul = $("<ul></ul>");
  $.each(treeObj.root, function(i, v) {
    $ul.append(
      $("<li></li>").append($("<a></a>")
        .attr({
          "class": "tracks",
          "id": v.id + '_tracks',
          "href": v.id,
          "data-file": v.trackFile
        })
        .html(v.trackName)
      )
    );
    var index = i;
    if (index == 0)
      firstIndex = v.id;
    if (index == count - 1)
      lastIndex = v.id;
  });


  //append ul 
  $("#player-digital-title").append($ul);


  $("#player-digital-title ul li:nth-child(1) a").addClass('selected');

  $("#prev-bt").addClass('disabled');

  $("#next-bt").click(function() {
    $('.tracks').removeClass('selected');

    $("#prev-bt").removeClass('disabled');

    if (clickedID < lastIndex) {
      clickedID++;

      if (clickedID == lastIndex) {
        $("#next-bt").addClass('disabled');
      }
    }

    $('#' + (clickedID) + '_tracks').addClass('selected');

  });

  $("#prev-bt").click(function() {
    $('.tracks').removeClass('selected');


    $("#next-bt").removeClass('disabled');


    if (clickedID > 1) {

      clickedID--;
      if (clickedID == 1) {

        $("#prev-bt").addClass('disabled');
      }
    }

    $('#' + (clickedID) + '_tracks').addClass('selected');

  });


});

＆＃13;

.selected {
  color: pink
}
#player-digital-title ul li {
  list-style: none;
}
.disabled {
  color: grey
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

jquery如何到达对象的末尾

3 个答案: