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

凯尔克是对的。你需要选择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＆amp;中选择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/

jQuery-增加显示的元素

2 个答案: