只有第一个带有 ID 的按钮响应答案

【问题标题】：Only first button with ID responds只有第一个带有 ID 的按钮响应
【发布时间】：2013-11-27 15:37:12
【问题描述】：

对于作业，我必须制作一个包含 3 个问题的页面，每个问题以按钮的形式提供 3 个答案。当按钮被点击时，它的颜色会根据答案是否正确而改变。

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

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

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

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

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

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

HTML

Doe mee aan onze 测验！

        <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'});     
        });

【问题讨论】：

ID 必须是唯一的！类可以多次重复使用
ID 应该是唯一的：页面上应该只存在一个。
@Augusto — 这不是最佳实践，这是语言的要求。
但是当我尝试向按钮添加 2 个类时，它说已经将一个类添加到按钮标签中
@Vahx class="buttons buttonjuist"

标签： javascript jquery html css button

【解决方案1】：

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

$('button[id=buttonfout]')

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

$('button.buttonfout')

这是一个更好的做法。

【讨论】：

【解决方案2】：

使用class，而不是id 属性。

否则，只会选择第一个。

【讨论】：

【解决方案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

【讨论】：