如何实现多个按钮点击时独立交替切换红绿颜色？

嘿，我来帮你搞定每个按钮独立切换红绿色的问题！

你当前代码的核心问题是重复使用了同一个id="toggle"——HTML规范里id是唯一标识，jQuery只会选中第一个带#toggle的按钮，所以其他按钮点击完全没反应。下面是完整的修复方案，兼顾动态生成按钮的场景：

完整实现代码 #

<?php 
$getInfo = getAllRows(); 
// 改用class替代重复id，给按钮加默认绿色样式类
$button = '<button type="button" class="toggle-btn green"></button>';
?>
<html>
<head>
<style>
/* 按钮基础样式 + 颜色类 */
.toggle-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 5px;
}
.green {
    background-color: #4CAF50;
    color: white;
}
.red {
    background-color: #f44336;
    color: white;
}
</style>
</head>
<body>
<div class="enableButtons">
    <?php foreach ($getInfo as $item): ?>
        <?php echo $button; ?>
    <?php endforeach; ?>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 用事件委托绑定点击事件（适配动态生成的按钮）
$(document).on('click', '.toggle-btn', function() {
    // 切换当前点击按钮的颜色类，实现红绿交替
    $(this).toggleClass('red green');
});
</script>
</body>
</html>

关键细节说明 #

1. 用class替代重复id：class="toggle-btn"可以批量应用到所有按钮，避免id唯一性冲突，同时方便统一绑定事件。
2. 事件委托机制：因为按钮是PHP动态生成的，直接用.toggle-btn.click()可能会失效，$(document).on('click', '.toggle-btn', ...)能确保所有后续生成的按钮都能响应点击。
3. CSS类切换颜色：相比直接修改style属性，用类切换更易维护——后续要调整颜色只需要修改CSS，不用动JS代码。

如果不想用CSS类，也可以用data属性存储状态实现切换（比如记录当前是否为绿色），但还是推荐CSS类的方式，代码更简洁优雅。

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