jQuery 實作按鈕狀態切換：紅色「申請」↔ 灰色「已申請」並同步數量加一

需求

頁面初始由伺服器輸出兩種按鈕其中之一：a.apply (紅色可點) 或 a.applydefault (灰色不可點)。點擊紅色按鈕後：

1. 切換為灰色樣式並禁用。
2. 發送 AJAX 通知後端更新狀態。
3. 頁面上對應數量顯示 +1。

HTML 結構 (簡化)

<a class="apply Q-buy-btn" wishseId="123" href="javascript:void(0)">
    <span>申請</span>
</a>
<!-- 或灰色版 -->
<a class="applydefault" wishseId="123" href="javascript:void(0)">
    <span>已申請</span>
</a>

<span class="count">0</span> <!-- 數量顯示 -->

jQuery 實作

$(function() {
    // 事件委派，支援動態新增按鈕
    $(document).on('click', 'a.apply', function(e) {
        e.preventDefault();
        var $btn = $(this);
        // 1. 已是灰色則忽略
        if ($btn.hasClass('applydefault')) return;

        var wishId = $btn.attr('wishseId');
        var $count = $('.count'); // 或依上下文精確選擇

        // 2. 立即切換 UI (樂觀更新)
        $btn.removeClass('apply Q-buy-btn')
            .addClass('applydefault')
            .find('span').text('已申請');
        $btn.css('cursor', 'default');

        // 3. 數量 +1
        var curr = parseInt($count.text(), 10) || 0;
        $count.text(curr + 1);

        // 4. AJAX 同步後端
        $.post('/api/wish/apply', { wishseId: wishId })
            .done(function(res) {
                if (!res.success) { // 失敗回滾
                    $btn.removeClass('applydefault')
                        .addClass('apply Q-buy-btn')
                        .find('span').text('申請');
                    $btn.css('cursor', 'pointer');
                    $count.text(curr);
                    alert('申請失敗：' + res.msg);
                }
            })
            .fail(function() {
                // 網路錯誤回滾
                $btn.removeClass('applydefault')
                    .addClass('apply Q-buy-btn')
                    .find('span').text('申請');
                $btn.css('cursor', 'pointer');
                $count.text(curr);
                alert('網路錯誤，請重試');
            });
    });
});

關鍵點

• **事件委派** `$(document).on('click', 'a.apply', ...)` 確保後端 AJAX 回傳新 HTML 時按鈕仍生效。
• **樂觀更新** 先改 UI 再發請求，體驗更流暢；失敗時回滾。
• **狀態同步**：後端回傳新狀態碼，前端依狀態碼渲染初始按鈕類別，避免快取不一致。
• **選擇器精確化**：數量顯示元素建議加 `data-wish-id="123"` 關聯，避免多筆資料互相干擾。

後端 API 契約範例

POST /api/wish/apply
{ "wishseId": 123 }
Response: { "success": true, "newCount": 5, "status": "applied" }