只有带ID的第一个按钮才会响应

Question

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

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

首先，第一个正确的答案是1A，​​它会改变，但没有其他正确的答案会响应，即使他们先被点击，同样的错误答案，只有1B会做出反应。

问题1    答案1A    回答1B    回答1C

问题2    回答2A    回答2B    回答2C

问题3    回答3A    回答3B    回答3C

CNC中 好吧，我明白了，不能重新使用ID ..

HTML

Doe mee aan onze quiz！

        <h4>Wat is de naam van Master Chief?</h4>
        <button class="buttons" id="buttonjuist">John-117</button>
        <button class="buttons" id="buttonfout">Douglas-092</button>
        <button class="buttons" id="buttonfout">James-016</button>

        <h4>Hoeveel kandidaten zijn er voor het SPartan-II project?</h4>
        <button class="buttons" id="buttonfout">300</button>
        <button class="buttons" id="buttonjuist">150</button>
        <button class="buttons" id="buttonfout">75</button>

        <h4>Waar wordt Master Chief gevonden?</h4>
        <button class="buttons" id="buttonfout">Reach</button>
        <button class="buttons" id="buttonfout">Harvest</button>
        <button class="buttons" id="buttonjuist">Eridanus</button>

CSS

.buttons{ 
    font-weight:bold;
    font-size:small;
    background-color:blue;
    width:200px;
    }

Jquery的

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

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

Answer 1

使用id。

，而不是class属性

否则，只会选择第一个。

Answer 2

正如已经多次说过的那样，id应该是独一无二的。如果由于某种原因你觉得反对每个人的建议并坚持id（不要！），这将有效：

$('button[id=buttonfout]')

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

$('button.buttonfout')

这是一个更好的做法。

Answer 3

实际上，您有两个类buttonjuist（正确答案）和buttonfout（错误答案）。当您将按钮更改为

时

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

和jQuery到

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

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

它将按预期工作。

完整JSFiddle