[英]jquery how to reach the end of an object
I have a previous and next link that appends text to a div, however I have been trying to figure out how to append to the ul from the treeObj
. 我有一个将文本追加到div的上一个和下一个链接,但是我一直在尝试找出如何从
treeObj
追加到ul。 I also cant seem to start the page off on the first ID. 我似乎也无法从第一个ID开始页面。 It starts blank.
它开始空白。
$("#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/ https://jsfiddle.net/5f4uzokf/
Since you already control the clickedID
in the next-btn
/ prev-btn
handlers, you can disable the links there, instead of just resetting it. 由于您已经在
next-btn
/ prev-btn
处理程序中控制了clickedID
,因此可以在此处禁用链接,而不仅仅是重置它。
Working jsFiddle: http://jsfiddle.net/LLf2c0hp/1/ 可用的jsFiddle: http : //jsfiddle.net/LLf2c0hp/1/
Additionally, you don't need to mix pure JavaScript and jQuery, unless there is a reason I didn't see. 另外,除非有我没有看到的原因,否则您不需要混合使用纯JavaScript和jQuery。
For instance, instead of 例如,代替
document.getElementById('player-digital-title').innerHTML = treeObj.root[clickedID - 1].trackName;
you could do 你可以做
$('div#player-digital-title').html(treeObj.root[clickedID - 1].trackName);
You can manually trigger the Next button
in document ready: 您可以在准备好的文档中手动触发“
Next button
:
$("#next-bt").click();
And you can add a condition in your handler to cancel the event: 您可以在处理程序中添加条件以取消该事件:
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;
}
I noticed that you didn't append your ul
element with its child li
elements on to the page, and that's why it wasn't working. 我注意到您没有将
ul
元素及其子li
元素附加到页面上,这就是为什么它不起作用的原因。 I changed that and a couple other small things too. 我改变了这一点,还有其他一些小事情。 Below is your updated code.
下面是您的更新代码。 I hope you find it okay :-)
我希望你觉得还好:-)
Updated 更新
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.