Javascript 只有ID为的第一个按钮响应

对于作业，我必须制作一个页面，页面上有3个问题，每3个答案以按钮的形式显示。 单击按钮时，其颜色将根据答案是否正确而变化

我可以让Jquery工作，但它似乎只适用于我拥有的第一个正确和错误的按钮

比如，第一个正确答案是1A，它会改变，但是没有其他正确答案会响应，即使他们先点击，对于错误答案也是一样，只有1B会响应

问题1 答复1A 答复1B 答复1C

问题2 答复2A 答复2B 答复2C

问题3 答复3A 答复3B 答案3C

-编辑- 好的，我明白了，不能重复使用ID

HTML

多米安安兹测验！ Jquery

$("#buttonjuist").on('click', function()     
        {      
            $(this).css({'background-color': 'green'});     
        });

$("#buttonfout").on('click', function()     
        {      
            $(this).css({'background-color': 'red'});     
        });

---

使用

class

代替

id

属性

---

否则，将只选择第一个。

正如已经说过多次的那样，id应该是唯一的。如果出于某种原因，你想违背每个人的建议，坚持id（不要！），这将奏效：

$('button[id=buttonfout]')

但是，是的，使用类并执行以下操作：

$('button.buttonfout')

---

这是一个更好的练习。

有效地，您有两个类

buttonjuist

（正确答案）和

buttonfout

（错误答案）。当您将按钮更改为

<button class="buttons buttonjuist">John-117</button>
<button class="buttons buttonfout">Douglas-092</button>

它将按预期工作

---

完整ID必须是唯一的！类可以重复使用任意次数。类应该是唯一的：页面上应该只存在一个。@Augusto-这不是最佳做法，这是语言的要求。但是当我尝试向按钮添加两个类时，它表示已经向按钮添加了一个类tag@Vahx

class=“buttons buttonjuist”

$('button.buttonfout')

<button class="buttons buttonjuist">John-117</button>
<button class="buttons buttonfout">Douglas-092</button>

$(".buttonjuist").on('click', function()     
        {      
            $(this).css({'background-color': 'green'});     
        });

$(".buttonfout").on('click', function()     
        {      
            $(this).css({'background-color': 'red'});     
        });