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

Only first button with ID responds

本文关键字：按钮 响应 第一个 ID 只有      更新时间：2023-11-02

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

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

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

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

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

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

-编辑-好的，我明白了，不能重复使用身份证。。

HTML

我是一个小测验

        <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（不要！），这会奏效：

$('button[id=buttonfout]')

但是，是的，使用类并做一些类似的事情：

$('button.buttonfout')

这是一个更好的练习。

使用class而不是id属性。

否则，将只选择第一个。

实际上，您有两个类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

相关文章：