Javascript 迭代类中的dom元素

我正在使用jquery做一个测验，希望能够相对地更改问题类中所有按钮元素的颜色。我看到的许多例子都展示了如何以绝对的方式实现这一点——这意味着类的所有实例的所有元素都会改变颜色。如何遍历div类的单个实例

功能点击fn（）{
console.log（'点击事件'）
$（“按钮”）。每个（函数（）{
如果（$（本）
$（this.toggleClass（“buttonSelected”）；
});
}；

。按钮{
背景颜色：灰色；
边界：无；
颜色：白色；
宽度：20vw；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
}
.按钮选择{
背景色：#f00；
边界：无；
颜色：白色；
宽度：20vw；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
}

问题n

错误答案

正确答案

错误答案

错误答案

问题n

错误答案

正确答案

错误答案

错误答案

正确答案
错误答案
正确答案
错误答案
正确答案
错误答案
正确答案
错误答案
$（“#容器按钮”）。每个（函数（）{
$（此）。在（'单击'，函数（）上）{
var allButtons=$（this.parent（）.find（'button'）；
控制台日志（所有按钮）；
$（所有按钮）。每个（函数（）{
$（this.toggleClass（“buttonSelected”）；
});
});
});

if（$（this）

（缺少大括号）中存在语法错误

不要对多个元素使用相同的

id

属性。它是一个标识符，因此应该是唯一的

不需要循环。只需使用或

（旁注）

---

这是你想要的吗

$（“.button”）。单击（函数（）{
$（this）.parent（）.find（'.button'）.toggleClass（“buttonSelected”）
.end（）.find（'.good'）.toggleClass（“buttonGood”）；
});
//或。最近的（）
//$（“.button”）。单击（函数（）{
//$（this）.closest（'div'）.find（'.button'）.toggleClass（“buttonSelected”）
//.end（）.find（'.good'）.toggleClass（“buttonGood”）；
//}）；

。按钮{
背景颜色：灰色；
边界：无；
颜色：白色；
宽度：20vw；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
}
.按钮选择{
背景色：#f00；
}
buttonGood先生{
背景色：#66ff00；
}

问题n

错误答案

正确答案

错误答案

错误答案

问题n

错误答案

正确答案

错误答案

错误答案

首先，

id

属性在同一文档中应该是唯一的，因此最好用类替换id

问题

：

<div class='question'>

相反，在javascript代码中创建一个单击事件，并使用方法代替

parent（）

和

each（）

来更改与单击按钮级别相同的按钮类别：

$('body').on('click', 'button', function(){
    if( $(this).hasClass('clicked') ){
        $(this).removeClass('clicked');
        $(this).siblings('button').removeClass('buttonSelected clicked');
    }else{
        $(this).removeClass('buttonSelected').addClass('clicked');
        $(this).siblings('button').removeClass('clicked').addClass('buttonSelected');
    }
});

希望这有帮助

---

工作片段

$（'body'）。在（'click'，'button'，function（）上{
if（$（this）.hasClass（'clicked'））
{
$（this.removeClass（'clicked'）；
$（this）.sides（'button'）.removeClass（'buttonSelected clicked'）；
}否则{
$（this）.removeClass（'buttonSelected'）.addClass（'clicked'）；
$（this）.bithers（'button'）.removeClass（'clicked'）.addClass（'buttonSelected'）；
}
})；

。按钮{
背景颜色：灰色；
边界：无；
颜色：白色；
宽度：20vw；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
}
.按钮选择{
背景色：#f00；
边界：无；
颜色：白色；
宽度：20vw；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
}

问题n
错误答案
正确答案
错误答案
错误答案
问题n
错误答案
正确答案
错误答案
错误答案

您的目标是只单独选择每个div内的所有按钮，因此您没有对所有按钮应用样式吗？是的，我希望在选择答案时div实例中的所有按钮都变灰，但不是全局选择所有按钮。签出我的更新答案。

<div class='question'>
    <span class='question_body'>Question n </span>
    <button class="button">Wrong Answer</button>
    <button class="button">Correct Answer</button>
    <button class="button">Wrong Answer</button>
    <button class="button">Wrong Answer</button>
</div>
<div class='question'>
    <span class='question_body'>Question n </span>
    <button class="button">Wrong Answer</button>
    <button class="button">Correct Answer</button>
    <button class="button">Wrong Answer</button>
    <button class="button">Wrong Answer</button>
</div>

$('body').on('click', 'button', function(){
    if( $(this).hasClass('clicked') ){
        $(this).removeClass('clicked');
        $(this).siblings('button').removeClass('buttonSelected clicked');
    }else{
        $(this).removeClass('buttonSelected').addClass('clicked');
        $(this).siblings('button').removeClass('clicked').addClass('buttonSelected');
    }
});