jQuery 實作：點選 li 選項將文字同步顯示至 span，含單選邏輯與擴展封裝

需求：多組 <ul> 列表，點選某 <li> 將其文字同步顯示至對應 <span>，並自動標記 .selected 樣式，取消同組其他選項。本文提供完整實作、封裝函式與擴展版本。

基礎 HTML 結構

<span id="checkedPJLi"></span>
<ul id="pj_items">
  <li val="djhj">定價黃金</li>
  <li val="jjhj">計價黃金</li>
</ul>

核心實作 (單組)

$(function(){
    // 1. 綁定點擊事件
    $("#pj_items li").on("click", function(){
        selectItem(this);
    });
});

function selectItem(elem) {
    var $elem = $(elem);
    // 2. 標記選中樣式
    $elem.addClass("selected");
    // 3. 取消同組其他選項
    $elem.siblings().removeClass("selected");
    // 4. 同步文字到 span
    $("#checkedPJLi").text($elem.text());
    
    // 擴展：同步自訂屬性
    // $("#checkedPJLi").attr("data-val", $elem.attr("val"));
}

通用封裝函式 (支援多組)

/**
 * 綁定列表選項同步顯示
 * @param {string} listId - ul id
 * @param {string} targetId - 目標 span id
 * @param {string} selectedClass - 選中樣式類別 (預設 "selected")
 */
function bindListSelection(listId, targetId, selectedClass = "selected") {
    $("#" + listId + " li").on("click", function() {
        var $this = $(this);
        $this.addClass(selectedClass).siblings().removeClass(selectedClass);
        $("#" + targetId).text($this.text());
    });
}

// 使用
$(function(){
    bindListSelection("pj_items", "checkedPJLi");
    bindListSelection("color_list", "selected_color");
    bindListSelection("size_list", "selected_size");
});

進階：支援多選模式

function bindListSelectionMulti(listId, targetId, separator = "、") {
    $("#" + listId + " li").on("click", function() {
        $(this).toggleClass("selected");
        var texts = $("#" + listId + " li." + "selected").map(function(){ 
            return $(this).text(); 
        }).get().join(separator);
        $("#" + targetId).text(texts);
    });
}

CSS 樣式建議

.selected { 
    background-color: #e3f2fd; 
    color: #1565c0; 
    font-weight: bold; 
    border-radius: 4px;
}
ul { list-style: none; padding: 0; }
li { cursor: pointer; padding: 8px 12px; margin: 4px 0; border: 1px solid #ddd; }

完整頁面範例

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style> ... </style>
</head>
<body>
  <h3>產品類別</h3>
  <span id="cat_display">未選擇</span>
  <ul id="cat_list">
    <li>手機</li><li>筆電</li><li>平板</li>
  </ul>
  <script>
    bindListSelection("cat_list", "cat_display");
  </script>
</body>
</html>

掌握「事件委派 + 狀態同步 + 封裝復用」模式，即可快速構建各類選單互動元件。