jquery hide /顯示列表元素來自ul

我想製作一個處理「顯示更多/更少」列表元素的腳本。我發現這個腳本：jquery hide /顯示列表元素來自ul

HTML

<ul id="myList"> 
    <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> 
    <li>Eleven</li> 
    <li>Twelve</li> 
</ul> 
<div id="loadMore">Load more</div> 
<div id="showLess">Show less</div>

CSS

#myList li{ display:none; 
} 
#loadMore { 
    color:green; 
    cursor:pointer; 
} 
#loadMore:hover { 
    color:black; 
} 
#showLess { 
    color:red; 
    cursor:pointer; 
} 
#showLess:hover { 
    color:black; 
}

JQUERY

$(document).ready(function() { 
    size_li = $("#myList li").size(); 
    x=3; 
    $('#myList li:lt('+x+')').show(); 
    $('#loadMore').click(function() { 
     x= (x+5 <= size_li) ? x+5 : size_li; 
     $('#myList li:lt('+x+')').show(); 
     if(x<=3){$('#showLess').hide();} 
    }); 
    $('#showLess').click(function() { 
     x=(x-5<0) ? 3 : x-5; 
     $('#myList li').not(':lt('+x+')').hide(); 
    }); 
});

https://jsfiddle.net/6FzSb/1550/

現在我想知道如何JavaScript的6號線和10我如何顯示所有條目以及如何隱藏showless（如果只顯示3個條目）？

來源

2015-05-19 Martin Fischer

可以執行像這樣

var visible = 3; 
$("#myList li:lt(" + visible + ")").show(); 
$("#loadMore").click(function() { 
    $("#showLess").show(); 
    visible = $("#myList li:visible").length + 3; 
    $("#myList li:lt(" + visible + ")").show(); 
    if (visible == $("#myList li").length) 
     $(this).hide(); 
}); 
$("#showLess").click(function() { 
    $("#loadMore").show(); 
    visible = $("#myList li:visible").length - 3; 
    $("#myList li:gt(" + (visible - 1) + ")").hide(); 
    if (3 == $("#myList li:visible").length) 
     $(this).hide(); 

});

Fiddle

來源

2015-05-19 13:49:15

最智能和最簡單的解決方案，謝謝 –

@MartinFischer始終歡迎 –

如果你問

$('#myList li:lt('+x+')').show();

那麼谷歌的 'jQuery選擇LT'。你知道如何計算列表大小（..size（）），如何隱藏和顯示DOM元素（..hide（）和..show（）），所以現在有兩個if塊可以隱藏加載時的'show less'並在click處理程序中隱藏'show more'。

來源

2015-05-19 13:40:25 Gilead

NONONO，我的意思是'X =（X + 5 <= size_li）？ x + 5：size_li;'和'x =（x-5 <0）？ 3：x-5;'多數民衆贊成什麼我不明白/知道它是什麼... –

@MartinFischer谷歌爲'三元運營商'。例如，第一個邏輯是：'如果x在結束之前少於5個條目評估爲x + 5 else評估爲size_li' – Gilead

謝謝，這是我的問題 –

選中此更新的代碼，

$(document).ready(function() { 
size_li = $("#myList li").size(); 
x=3; 
$('#myList li:lt('+x+')').show(); 
$('#showLess').hide(); 
$('#loadMore').click(function() { 
    x= (x+5 <= size_li) ? x+5 : size_li; 
    $('#myList li:lt('+x+')').show(); 

    if(size_li == x){ 
     $(this).hide(); 
    }else{ 
     $('#showLess').show(); 
    } 
}); 
$('#showLess').click(function() { 
    x=(x-5<0) ? 3 : x-5; 
    $('#myList li').not(':lt('+x+')').hide();   
    if(x <= 3){ 
     $('#showLess').hide(); 
    }else{ 
     $('#loadMore').show(); 
    } 
});

}）;

JSFIDDLE

來源

2015-05-19 13:45:34 nexToad

jquery hide /顯示列表元素來自ul

回答

相關問題