Question

每次用户回答问题时，我都会尝试使用进度条（即使页面上有多个问题）。所以我在页面的开头/顶部设置了变量：

<div id="progress"><p id="counter"><span id="percent">0%</span></p></div>
<script>var count = 0;
var total = 79;
var progress = 0;</script>

然后我通过无线电输入为大多数问题做了一些jQuery，并且它们工作正常（如果你在问题上改变选项，不要增加计数）。但是，对于复选框和选择，它不起作用：

$('input[name="race"]').one("click", function(){
    var n = 0;
    if (n==0) {
        n = ++n;
        count = ++count;
        progress = count/total;
        $("#counter").css("width", progress);
        $("#percent").text(progress + "%")
    }
});

如果删除if语句，该函数可以正常工作，但每个复选框都会增加count。

我还想将progress修剪为仅3个字符，但它不喜欢progress = progress.slice(0,3);或`progress = progress.substr（0,10）

Answer 1

对于if语句，它需要另一个=符号。这应该是正确的逻辑。哦，你在上面的行中将n设置为一个字符串，但将它与下面一行中的int进行比较。您需要选择其中一个。从n = n ++行我相信你会想要改变var n = 0;而不是var n =“0”; 然后对于progress变量，您尝试获取int的substr。因此，您需要在修剪之前将int转换为字符串。但作为一个整体，它不应该被任何削减。

Answer 2

假设您只有单选按钮，复选框和选择。这应该可以解决问题

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script>
    var progress = 0;
    //need this to check if the question has not been answered before
    var questions = {
        "pref1": 0,
        "pref2":0,
        "pref3":0
    }
    $( function() {
        $("#progress").text(progress)
        $("input, select").change( function() {
            el_name = $(this).attr("name");


            switch (this.nodeName.toLowerCase()) {
                case "select":
                    field =$("[name='"+el_name+"']");
                    val = (field.val() === ""  || !field.val()) ? null: field.val();
                    break;
                case "input":
                    field =$("[name='"+el_name+"']:checked");
                    val = field.length;
                    break;
            }

            if (val) {

                if (!questions[el_name]) {
                    progress = progress +1;
                    questions[el_name]=1
                }

            } else {


                questions[el_name]=0
                progress = (progress > 0)?progress-1:0;


            }

            $("#progress").text(progress)
        })
    })
</script>
<div id="progress">
</div>
<input type="radio" name="pref1" value="one">
one
<input type="radio" name="pref1" value="two">
two
<br>
<select name="pref2">
    <option value="">Please select</option>
    <option value="2">2</option>
</select>
<br>
<input type="checkbox" name="pref3" value="one">
one
<input type="checkbox" name="pref3" value="two">
two

javascript / jquery调查进度条

2 个答案: