jQuery-增加显示的元素

Question

我的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/

Answer 1

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/

Answer 2

您没有在Frameworks＆Extensions菜单中选择jQuery。 因此，此简单的代码有效：

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

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