javascript/jquery 调查进度条

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”；
然后对于进度变量，您尝试获取 int 的子串。因此，您需要在修剪之前将 int 转换为字符串。但作为一个 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