индикатор выполнения опроса 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