javascript – So erstellen Sie eine Online-Umfrage über jQuery

Question

Ich habe vor, einen reinen Front-End-Fragebogen zu erstellen. Es gibt insgesamt zehn Fragen. Wenn Sie A wählen, erhalten Sie zwei Punkte, wenn Sie C wählen, erhalten Sie drei Punkte, und wenn Sie D wählen, erhalten Sie vier Punkte Die Ergebnisse werden direkt am Ende angezeigt. Derzeit bin ich auf folgende Frage gestoßen: Wenn der Benutzer beispielsweise in der ersten Frage A auswählt und später seine Antwort in B ändert, dann ...

我想大声告诉你 · Answer

//仅针对你的单选题，且每道题目都设置了value
//虽然你说是十道而所贴代码中为11道,长度依然取的10

$(document).ready(function() {
    //存储选项值
    var valueArr = [];
    //总分值
    var value = 0;
    //已选长度
    var checkedLength;
    //题目个数
    var length = 10;
    //分值存入valueArr
    function count() {
        var $parent = $(this).parents('.swiper-slide');
        console.log($parent,$parent.index('.swiper-slide'))
        valueArr[$parent.index('.swiper-wrapper .swiper-slide')] = $(this).val();
        //触发自定义事件
        $('.swiper-wrapper').trigger('valueChange');
    }
    //点击触发计分
    $(".choice input[type = 'radio']").on("click", count);
    //绑定自定义事件
    $('.swiper-wrapper').on('valueChange',function(){
        checkedLength = $('.choice input:checked').length;
        //判断是否全选
        if(checkedLength==length){
            value = 0;
            console.log(valueArr)
            valueArr.forEach(function(i){
                value += Number(i);
            })
            $('#result').html(value);
        }
    })
});

phpcn_u1582 · Answer

他提交问卷的时候才把所有input的value值加起来不就可以了

高洛峰 · Answer

其实不能这样算。计算用户的分数的时候就是重新统计一下，那么如果这样做的话，怎么会出现-1+2这样的情况。这可能是重新累加

阿神 · Answer

若是10道题选完后才弹出总分数，可以在最后获取所有题目的被选的答案对应的分数不就好了，没必要选择时立刻累加。

世界只因有你 · Answer

第11道题，你怎么点，分数都不加也不减。

因为你没有对它进行计算，代码不用变化，把10改成11就可以了。

phpcn_u1582 · Answer

$(function(){
            var item = {};
            item.length = 0;
            $("input").click(function(){//绑定点击事件
                if(!($(this).attr("name") in item)){
                    item.length = item.length + 1;
                }
                item[$(this).attr("name")] = $(this).attr("class");
                //console.log(item);
                
                if(item.length === 11){
                    countScore();
                }
            })
            function countScore(){//统计得分
                var total = 0;
                for(var i in item){
                    switch (item[i]){
                        case "a":
                            total = total+1;
                            break;
                        case "b":
                            total = total+2;
                            break;
                        case "c":
                            total = total+3;
                            break;
                        case "d":
                            total = total+4;
                            break;
                        default:
                            break;
                    }
                }
                console.log(total);
            } 
        })

javascript – So erstellen Sie eine Online-Umfrage über jQuery

Antworte allen(6)Ich werde antworten