jQuery-增加显示的元素

jQuery- Increase displayed elements

本文关键字：元素 显示 增加 jQuery-      更新时间：2023-09-26

我的JQ代码有一些问题。

默认情况下，我必须只显示UL列表中的4个元素。但如果我点击"显示更多"元素，我必须从UL列表中再显示+4（+4）个元素。

有人知道我该怎么做吗？

抱歉我英语不好：（

这是我的代码：

$(document).ready(function() {
    $('ul#Galeria > li:gt(3)').css( "display", "none" );
    $( ".readmore > a" ).click(function() {
        $("ul#Galeria > li:gt(3)").fadeIn("slow").show();
        $(".readmore").css('display', 'none');
        return false;
    });
});

http://jsfiddle.net/6w2nm7z1/

KyleK是对的。您需要选择jQuery。我让你的脚本更通用，允许你点击阅读更多，直到所有项目都显示出来，还可以设置每次点击显示的项目数。希望这会有所帮助。 
var displayCount = -1; // tracks how many are showing
var readMoreIncrement = 4; // number of items to show at each increment
var liTotal = $("ul#Galeria li").length; // total number of items in list
console.log("liTotal: "+liTotal);
readMore();
$(".readmore > a" ).click(readMore);
function readMore () {
    displayCount += readMoreIncrement;
    console.log("displayCount: "+displayCount);
    $('ul#Galeria > li:gt(' + displayCount + ')').css( "display", "none" ); // hides items that are not ready to be shown
    $("ul#Galeria > li:lt(" + (displayCount + 1) + ")").fadeIn("slow").show(); // shows the next set of items
    if(displayCount >= (liTotal - 1)) $(".readmore").css('display', 'none'); // hides read more link when all items are shown
    return false;
}

演示：http://jsfiddle.net/wilchow/o771897y/4/

您没有在Frameworks&扩展菜单。所以这个简单的代码有效：

$('ul#Galeria > li:gt(3)').fadeOut(0);
$( ".readmore > a" ).click(function() {
    $("ul#Galeria > li:gt(3)").fadeIn("slow");
});

http://jsfiddle.net/KyleKatarn/6w2nm7z1/3/

相关文章：