我使用 jQuery 一次显示 10 个元素。这是我的代码
var max_items_page = 10;
$('#song_list div:lt('+max_items_page+')').show();
var shown = null;
var items = $("#song_list").find('div').length;
$('#loadMore').on('click',function(e){
shown = $('#song_list div:visible').length+max_items_page;
if(shown<items) {
$('#song_list div:lt('+shown+')').show();
}
else {
$('#song_list div:lt('+items+')').show();
$('#loadMore').hide();
}
});
这是显示歌曲列表的代码
<div id='song_list'>
{% for song in dj_song_list %}
<div>
<p class="song"><h3>#{{ forloop.counter}} {{ song.name }}</h3></p>
</div>
{% endfor %}
</div>
<button id='loadMore'>Load more</button>
这是CSS
#song_list div {
display:none;
}
这不会显示任何结果,只会显示“加载更多”按钮。代码有什么问题?
最佳答案
在您的代码中,您隐藏了#song_list 中的所有 div 标签。所以如果你想隐藏第一个以外的内容,只需这样做:
#song_list div:not(div:first-child) {
display:none;
}
或者您可以使用 jquery 显示您想要的内容:
#song_list div {
display:none;
}
Javascript:
$('#song_list div').slice(1,10).show();
关于javascript - 使用显示 :none hides all elements in jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20694663/