前後端 JSON 陣列整合：以介面端資料為準同步穴位選擇狀態

業務場景

頁面包含兩組穴位資料：

• 完整穴位列表 (arr1)：供使用者點擊選擇，支援多選切換。
• 疾病對應穴位 (arr2)：從後端獲取，需自動勾選對應項目並同步至隱藏域提交。

核心難點：使用者點擊完整列表時，需即時更新提交字串；載入後端資料時，需自動高亮匹配項並初始化提交值。原代碼存在邏輯混亂、重複綁定事件、狀態不同步等問題。

優化後的核心邏輯

// 1. 初始化完整列表並綁定點擊事件（僅綁定一次）
function initFullList(arr1) {
    $('#xueweiList').empty();
    arr1.forEach(item => {
        $('#xueweiList').append(`<li id="${item.acupoint_num}"><a href="#">${item.name}</a></li>`);
    });
    
    $('#xueweiList li').off('click').on('click', function() {
        var $li = $(this).toggleClass('h_nav_over');
        var id = this.id;
        var val = $('#xueweis').val() || '';
        var arr = val ? val.split(',') : [];
        var idx = arr.indexOf(id);
        
        if ($li.hasClass('h_nav_over')) {
            if (idx === -1) arr.push(id); // 新增
        } else {
            if (idx !== -1) arr.splice(idx, 1); // 移除
        }
        $('#xueweis').val(arr.join(','));
    });
}

// 2. 載入後端資料並同步狀態
function loadDiseasePoints(arr2, arr1) {
    var selectedIds = [];
    var html = '';
    
    arr2.forEach(item => {
        selectedIds.push(item.acupoint_num);
        html += `<input type='button' id='${item.acupoint_num}' value='${item.earName}' name='earName'/>`;
        
        // 高亮完整列表中對應項
        $('#' + item.acupoint_num).addClass('h_nav_over');
    });
    
    $('#xueweis').val(selectedIds.join(','));
    $('#xuewei2').html(html);
}

// 3. 入口：AJAX 獲取後端資料後調用
$.ajax({
    url: '/api/getPoints',
    success: function(data) {
        var arr1 = [/* 完整穴位 */];
        var arr2 = data.diseasePoints; // 後端返回
        
        initFullList(arr1);
        loadDiseasePoints(arr2, arr1);
    }
});

關鍵修正點

• 事件解綁重綁：使用 .off().on() 避免重複綁定導致邏輯執行多次。
• 狀態單一來源：隱藏域 #xueweis 作為唯一提交值來源，UI 類名 h_nav_over 僅反映狀態。
• 陣列操作替代字串拼接：用陣列 push/splice/join 管理 ID 集合，避免逗號處理錯誤。
• 職責分離：列表渲染、事件綁定、資料同步分別封裝函式，便於維護。