JSP forEach 迴圈中動態修改元素樣式：ID 衝突問題與正確解法

問題場景

在 JSP 中使用 <c:forEach> 迭代生成多個刪除按鈕，嘗試用 JavaScript 根據 dto.user_type 動態控制顯示/隱藏：

<c:forEach items="${list}" varStatus="state" var="dto">
    <input style="display:" class="btn btn-block btn-red" id="del" name="${dto.user_type}" value="刪除" onclick="">
</c:forEach>

原始 JS 代碼：

function test() {
    var pdb = document.getElementById("del");  // 只能獲取第一個元素
    // ...
}

根本原因

HTML 標準規定 id 屬性在文檔中必須唯一。forEach 生成多個 id="del" 導致重複，getElementById 僅返回首個匹配元素，其餘被忽略。

正確解法

方案一：使用 class 選擇器 + data-* 屬性（推薦）

<c:forEach items="${list}" var="dto">
    <input type="button" class="del-btn" data-user-type="${dto.user_type}" value="刪除">
</c:forEach>

<script>
document.querySelectorAll('.del-btn').forEach(function(btn) {
    if (btn.dataset.userType === '0') {
        btn.style.display = 'inline-block';
    } else {
        btn.style.display = 'none';
    }
});
</script>

方案二：動態生成唯一 ID

<c:forEach items="${list}" varStatus="vs" var="dto">
    <input id="del_${vs.index}" name="${dto.user_type}" ...>
</c:forEach>

JS 中需遍歷索引查找，不如方案一優雅。

方案三：純後端渲染控制（無需 JS）

<c:forEach items="${list}" var="dto">
    <input type="button" class="btn btn-block btn-red" 
           style="display: ${dto.user_type == '0' ? 'inline-block' : 'none'}" 
           value="刪除">
</c:forEach>

最簡潔，避免前端邏輯複雜度。

進階建議

• 使用 data-* 屬性攜帶業務數據，避免濫用 name/value
• 採用事件委託：document.body.addEventListener('click', e => { if(e.target.matches('.del-btn')) ... })
• 若需初始化後動態切換，封裝函數 refreshDelButtons() 於 AJAX 完成後調用

總結

迴圈生成 DOM 元素時，**嚴禁重複 id**。善用 class + data-* 屬性或後端直接渲染樣式，是解決此類問題的標準模式。