Tôi có một phần tử danh sách có chứa một số từ 20-30 sự kiện. Tôi chỉ muốn hiển thị 5 trong số đó và có liên kết «Thêm» tôi có thể nhấp để xem năm tiếp theo. Nó không quan trọng nếu năm sự kiện tiếp theo được nối thêm.Sử dụng jQuery để giới hạn số phần tử danh sách
Không thể tìm thấy tập lệnh jQuery thực sự thực hiện việc này hoặc tôi chỉ bị mù? Tôi không muốn sử dụng các plugin carousel hoặc bất cứ thứ gì như thế.
Vâng, fortunat ely cho chúng ta lập trình viên, những người viết mã cho thực phẩm và danh vọng, không phải mọi mảnh tưởng tượng của chức năng đã được viết chưa như là một plugin :)
Nhưng điều này là khá dễ dàng:
var from = 0, step = 5;
function showNext(list) {
list
.find('li').hide().end()
.find('li:lt(' + (from + step) + '):not(li:lt(' + from + '))')
.show();
from += step;
}
function showPrevious(list) {
from -= step;
list
.find('li').hide().end()
.find('li:lt(' + from + '):not(li:lt(' + (from - step) + '))')
.show();
}
// show initial set
showNext($('ul'));
// clicking on the 'more' link:
$('#more').click(function(e) {
e.preventDefault();
showNext($('ul'));
});
Tất nhiên điều này là tốt hơn được trích xuất thành chức năng giống như plugin, nhưng tôi sẽ để nó như một bài tập cho người đọc;)
này hoạt động nhưng chắc chắn bạn sẽ phải tinh chỉnh nó một số những gì :)
html:
<div style="width:200px;border:3px groove blue;">
<ul id="list">
<li>Thai</li>
<li>Turkish</li>
<li>Portuguese</li>
<li>American English</li>
<li>Arabic</li>
<li>Canadian French</li>
<li>Chinese Simplified</li>
<li>Chinese Traditional</li>
<li>Czech</li>
<li>Danish</li>
<li>Dutch</li>
<li>English</li>
<li>Finnish</li>
<li>French</li>
<li>German</li>
<li>Greek</li>
<li>Hebrew</li>
<li>Hungarian</li>
<li>Italian</li>
<li>Japanese</li>
<li>Norweigan</li>
<li>Polish</li>
<li>Russian</li>
<li>Spanish</li>
</ul>
<a href="#" id="lnkMore">More</a>
</div>
javascript:
<script type="text/javascript">
var len = 0;
var curStart = 0;
var count = 5;
var items=new Array();
function BackupList() {
var lst = $("ul#list");
len= $("ul#list li").length;
if (len <= count)
return;
$("ul#list li").each(function() {
items.push($(this));
$(this).remove();
});
var html="";
for (curStart; curStart < count && curStart < len; curStart++) {
html += "<li>" + $(items[curStart]).html() + "</li>";
}
$(html).appendTo($(lst));
}
function ShowMore() {
if (curStart >= len) {
curStart = 0;
}
$("ul#list li").each(function() {
$(this).remove();
});
var l = curStart;
var html = "";
for (curStart; curStart < (l + count) && curStart < len; curStart++) {
html += "<li>" + items[curStart].html() + "</li>";
}
$(html).appendTo($("ul#list"));
}
</script>
Wire jquery cho sự kiện:
<script type="text/javascript">
$(document).ready(function() {
BackupList();
$("a#lnkMore").click(function() { ShowMore(); });
});
</script>
Bạn muốn bắt đầu với từng phần tử trong danh sách bị ẩn (CSS: display: none). Sau đó, có thêm liên kết của bạn undernearth phần tử danh sách.
$(document).ready(function()
{
$("a#myMoreLink").click(function()
{
var items = $("ul#myList > li:hidden");
if(items.length > 0)
items.slice(0, 5).show();
else
$(this).html("No more");
return false;
});
$("a#myMoreLink").click();
});
Với HTML:
<ul id="myList">
<li style="display: none"></li>
<li style="display: none"></li>
</ul>
<a href="http://" id="myMoreLink">More</a>
Something như thế. $ ("a # myMoreLink"). nhấp(); được gọi để hiển thị 5 mục đầu tiên khi tải trang.
Mã lỗi: mã sẽ luôn chuyển đổi giữa các phần tử 5 và 5 đầu tiên. Các yếu tố từ 10 đến 15 sẽ không bao giờ được hiển thị. –
Tôi không kiểm tra mã, đó là mã giả. OP cho biết nó không quan trọng nếu họ đã được nối thêm (dễ dàng thay đổi). Nó hoạt động. Tôi vừa thử nghiệm nó. Chỉ có một danh sách của tôi -> myList. Bạn xuống cấp cho tôi về điều đó và tạo nên một số lỗi về 10-15 yếu tố? Đây không phải là một cuộc thi, jeez. Đây là mã đầy đủ: http://pastebin.com/m56bb8358 –
<html>
<head><title>Test</title></head>
<body>
<ul class="more">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
</ul>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
$("ul.more").each(function() {
$("li:gt(4)", this).hide(); /* :gt() is zero-indexed */
$("li:nth-child(5)", this).after("<li class='more'><a href='#'>More...</a></li>"); /* :nth-child() is one-indexed */
});
$("li.more a").live("click", function() {
var li = $(this).parents("li:first");
li.parent().children().show();
li.remove();
return false;
});
});
</script>
</script
</body>
</html>
Về cơ bản điều này không:
Chỉnh sửa: Cố định một vài lỗi nhỏ. Ở trên là một ví dụ hoàn toàn làm việc ngay bây giờ (chỉ cần đảm bảo liên kết jquery là chính xác).
Tôi đã viết một plugin hideMaxListItems có thể là những gì bạn đang tìm kiếm. Bạn có thể đặt số lượng mục danh sách tối đa, tốc độ hoạt ảnh cho hoạt ảnh trang trình bày và mở rộng/thu gọn nút HTML. Hoạt ảnh trang trình bày được thực hiện tuần tự trên mỗi mục danh sách, để tạo ra một hình động trơn tru.
http://www.joshuawinn.com/maximum-list-items-jquery-hide-after-x-number-bullets/
Điều này có vẻ tốt đẹp, nhưng làm cách nào để ẩn tất cả mục danh sách ngoại trừ năm mục đầu tiên? –
Cuộc gọi ban đầu tới 'showNext (yourList)' sẽ ẩn mọi thứ trừ năm phần tử đầu tiên. Tôi đoán bạn sẽ muốn gọi nó trên '$ (tài liệu) .ready()'. –
Nó không hiệu quả đối với tôi, nhưng chỉ có tôi là người đã quên bọc tất cả các li trong một ul;) Cảm ơn! –