Question

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

以下是我的代码的小提琴：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

为每个按钮添加一个类，并按类而不是id

获取它们

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

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

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

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

最佳。

Answer 2

使用问题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/

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

2 个答案: