如何使用JavaScript修改PHP+MySQL动态生成的含“SOLD”字样的按钮样式

• ID重复问题：HTML规范要求id属性全局唯一，你通过PHP循环渲染多条商品数据时，所有按钮都用了相同的id="isSold"，document.getElementById()只能获取到页面中第一个匹配id的元素，无法识别其余的售出按钮。
• 函数未触发+指向错误：你定义了ToggleSold函数但没有调用逻辑，且函数内的this没有绑定到按钮元素，即使调用也无法正确修改对应按钮的样式。
• DOM加载时机问题：如果JS代码在PHP动态渲染的DOM元素加载完成前就执行，会找不到目标元素，判断逻辑自然不会生效。

第一步：修改PHP渲染逻辑，替换id为class #

<td class="view_button">
    <?php echo "<a class='isSold' href='/dynamic_page.php?id={$row['id']}'>{$row['View']}</a>"; ?>
</td>

第二步：修改JS逻辑，监听DOM加载完成后遍历处理 #

document.addEventListener('DOMContentLoaded', function () {
    // 获取所有商品按钮
    const allButtons = document.querySelectorAll('.isSold');
    allButtons.forEach(button => {
        // trim() 清除文字前后的空白字符避免判断失败
        if (button.textContent.trim() === 'SOLD') {
            button.style.backgroundColor = 'grey';
            // 可选：禁用已售出按钮的点击行为
            button.style.pointerEvents = 'none';
        }
    })
})

你完全可以在PHP渲染页面的时候直接给售出按钮加样式，性能更好也不会有DOM加载时序问题：

1. PHP渲染部分修改：

<td class="view_button">
    <?php
    $soldClass = $row['View'] === 'SOLD' ? 'sold-button' : '';
    echo "<a class='isSold {$soldClass}' href='/dynamic_page.php?id={$row['id']}'>{$row['View']}</a>";
    ?>
</td>

2. 增加对应CSS样式：

.sold-button {
    background-color: grey;
    pointer-events: none;
    cursor: default;
}

内容的提问来源于stack exchange，提问作者HandyAndy