Question

我正在开发一个调查网站，我想向用户展示剩下的问题。

由于问题是动态的，我会从数据库中读出要在柜台中显示的问题总数。

然后每次用户回答问题（用户从单选按钮组中选择答案）时，我会将计数器减1，依此类推。

每当用户点击一个单选按钮时，我都会调用该函数，并且它可以正常工作。但我不知道如何代表柜台？以及如何在屏幕上显示计数器？我应该将哪些值传递给该函数？如果我们能以一种很好的视觉方式显示计数器也会有所帮助，即使用户向上或向下滚动，计数器也应始终可见。

每个问题都是独一无二的：

<div id="Q1">What is your gender?
<input type='radio' name='RQ1' value='Male' onClick="RadioClicked(Q1)" />
<input type='radio' name='RQ1' value='Female' onClick="RadioClicked(Q1)" />
</div>

这是Javascript函数，例如我正在更改背景颜色以确保函数正常工作，但在此函数中我应该减少计数器：

function RadioClicked(Question){
        document.getElementById(Question).style.backgroundColor = "Gray";
}

Answer 1

尝试以下方法：

var q = $('div[id^="Q"]').length // number of questions
$('input[type=radio]').change(function(){
    $(this).parent().css('background-color', 'Gray');
    var remained = q - $('input[type=radio]:checked').length // number of unanswered questions
    $('#remaining').text(remained)
})

DEMO

用Javascript或jQuery计数器

1 个答案: