jQuery動態拼接URL參數傳遞隱藏域值的正確姿勢

問題代碼

<a href="shareKnowlege.html?id=$("#hidden").val()" 
   target="f4" class="STYLE9" id="knowshare">知識分享</a>

問題：頁面加載時$("#hidden").val()執行一次，若隱藏域值後續變化，href不會更新。

正確方案：事件綁定動態構建

<a href="shareKnowlege.html" 
   onclick="this.href='shareKnowlege.html?id='+$('#hidden').val()" 
   target="f4" class="STYLE9" id="knowshare">知識分享</a>

原理解析

最佳實踐：分離關注點

// HTML
<a href="shareKnowlege.html" id="knowshare" 
   data-target="f4" class="STYLE9">知識分享</a>

// JS (推薦寫法)
$('#knowshare').on('click', function(e) {
    var hiddenVal = $('#hidden').val();
    if (!hiddenVal) {
        alert('請先填寫必要信息');
        e.preventDefault();
        return;
    }
    this.href = 'shareKnowlege.html?id=' + encodeURIComponent(hiddenVal);
});

進階技巧

• encodeURIComponent()：防止特殊字符破壞URL
• e.preventDefault()：攔截默認跳轉，驗證後手動location.href
• 用data-*屬性存儲基礎URL，JS拼接參數

避坑指南

1. 不要在href中直接寫JS表達式
2. 動態參數必須在事件處理器中構建
3. 注意XSS風險，用戶輸入需編碼

記住：href屬性值在頁面加載時確定，動態參數要在交互事件中構建。