Javascript 测验应用中的按钮状态

我正在做一个类似于buzzfeed的测验，比如。我已经计划好了逻辑，我可以看到我应该如何编码它，使其与链接中的类似，但是我对按钮状态有一个问题

下面是我的代码：

编码一个问题似乎不是ff的问题：悬停时更改颜色，减少其他选项的不透明度，选择后更改为蓝色，等等。。。但是当我添加更多的问题时，我意识到我必须使用addClass和removeClass来为每个问题的每个选项提供按钮效果，正如您所看到的，这对于编写代码来说并不太实际

---

还有其他更有效的方法吗？

为每个按钮添加一个类，并按类而不是按id获取它们

$('.quizbuttons').removeClass("fadeout"); 

按钮应具有“quizbuttons”类，如：

或者你正在使用的任何元素

---

最佳。

使用问题div的单击事件，您可以使用

$this

关键字应用这些类

$(document).ready(function () {
    $('.a_choice').click(function () {
        $(this).siblings().removeClass("highlight");
        $(this).siblings().addClass("fadeout");

        $(this).children('input').prop('checked', true);
        $(this).addClass('highlight');
        $(this).removeClass("fadeout");
    });
});

---

见

是的，是的，有。它包括重新构造代码以使用数组和循环。非常感谢！jquery函数.sibling（）和.children正是我想要的！您提供的示例代码也帮助我理解了它们的概念。：）

<button class="quizbuttons"></button>

$(document).ready(function () {
    $('.a_choice').click(function () {
        $(this).siblings().removeClass("highlight");
        $(this).siblings().addClass("fadeout");

        $(this).children('input').prop('checked', true);
        $(this).addClass('highlight');
        $(this).removeClass("fadeout");
    });
});