javascript - 测验应用程序中的按钮状态

Question

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

这是我的一小段代码:sample quiz

$(document).ready(function () {
                $('#btn1, #a1').click(function () {
                   $('#a1').removeClass("fadeout");                    
                   $('#a1').addClass("highlight");

                    $('#a2').removeClass("highlight");  
                    $('#a3').removeClass("highlight");  
                    $('#a4').removeClass("highlight");  
                    $('#a5').removeClass("highlight");  
                    $('#a6').removeClass("highlight");  
                   $('#a2').addClass("fadeout");
                   $('#a3').addClass("fadeout");
                   $('#a4').addClass("fadeout");
                   $('#a5').addClass("fadeout");
                   $('#a6').addClass("fadeout");
                   btn1.checked = "true";
                   btn2.checked = "";
                   btn3.checked = "";
                   btn4.checked = "";
                   btn5.checked = "";
                   btn6.checked = "";
                   window.alert(document.write(getElementById("btn1").value));

编码单个问题似乎不是 ff 的问题:在悬停时更改颜色、减少其他选项的不透明度、在选择后更改为蓝色等...但是当我添加更多问题时，我意识到我对于每个问题的每个选择，都必须使用 addClass 和 removeClass 来实现按钮的效果，如您所见，这对编码来说不太实用。

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

Answer 1

使用问题 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");
    });
});

参见 http://learn.jquery.com/javascript-101/this-keyword/