jquery如何到达对象的末尾

jquery how to reach the end of an object

本文关键字：对象 jquery      更新时间：2024-06-26

我有一个上一个和下一个链接，可以将文本附加到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/

您可以手动触发文档就绪：中的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;
}

这是演示。

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

工作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);

我注意到您没有将ul元素及其子li元素附加到页面上，这就是它不起作用的原因。我改变了这一点，也改变了其他一些小事情。以下是您的更新代码。我希望你觉得还好：-）

更新

$(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');
  });
});
.selected {
  color: pink
}
#player-digital-title ul li {
  list-style: none;
}
.disabled {
  color: grey
}
<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>

相关文章：