首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計疑難解答

jQuery 實現「展開/收起」Span 標籤列表:修正收起邏輯 Bug

     編輯:程式設計疑難解答

需求

  • 初始顯示前 5 個 <span>
  • 點擊「更多」顯示全部,每 10 個換行
  • 按鈕切換為「收起」,再點擊恢復只顯示前 5 個

原代碼 Bug 分析

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();
}

進階:每 10 個換行

function formatSpans() {
    $("#showDiv span").each(function(i) {
        if (i > 0 && i % 10 === 0) $(this).before("<br/>");
    });
}
// 頁面載入時呼叫一次
$(document).ready(formatSpans);

完整 HTML 範例

<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>
  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved