<span>function showLess(){
var s = $("#showDiv span");
for(i=5; i<s.length;i++){
s.css("display","none"); // 錯誤:s 是 jQuery 物件陣列,css() 會套用到所有元素
}
$("#less").hide(); $("#more").show();
}
s.css("display","none") 會將 所有 span 隱藏,而非第 5 個之後。
function showMore() {
$("#showDiv span").show();
$("#more").hide();
$("#less").show();
}
function showLess() {
var spans = $("#showDiv span");
spans.each(function(idx) {
if (idx >= 5) $(this).hide(); // 使用 each 逐個判斷索引
});
$("#less").hide();
$("#more").show();
}
function formatSpans() {
$("#showDiv span").each(function(i) {
if (i > 0 && i % 10 === 0) $(this).before("<br/>");
});
}
// 頁面載入時呼叫一次
$(document).ready(formatSpans);
<div id="showDiv">
<span>1</span> ... <span>15</span>
<span id="more" onclick="showMore()">更多</span>
<span id="less" style="display:none" onclick="showLess()">收起</span>
</div>