Question

以下代码是一种动态方式，可以将每个选项显示为每个问题的复选框按钮：

        function ExpandOptionType($option) { 
                $options = explode('-', $option);
                if(count($options) > 1) {
                    $start = array_shift($options);
                    $end = array_shift($options);
                    do {
                        $options[] = $start;
                    }while(++$start <= $end);
                 }
                 else{
                    $options = explode(' or ', $option);
                 }
                 echo '<p>';
                 foreach($options as $indivOption) {
                     echo '<div id="ck-button"><label class="fixedLabelCheckbox"><input type="checkbox" name="options[]" id="option-' . $indivOption . '" value="' . $indivOption . '" /><span>' . $indivOption . '</span></label></div>';
                 }
                  echo '</p>';


            }


            foreach ($arrQuestionId as $key=>$question) {

            ?>

            <p><?php echo ExpandOptionType(htmlspecialchars($arrOptionType[$key])); ?></p>

    <p><input type='text' class='questionIds' name='questionids' value='<?php echo htmlspecialchars($arrQuestionId[$key]); ?>' /></p>

    <p><input type='text' class='responseTime' name='responsetime' value='00:00:00' /></p>

    <p><input type='text' class='mouseClick' name='mouseclick' value='0' /></p>

}

现在低于I 2个文本输入，它们也在foreach循环中，一个用于响应时间，另一个用于计算鼠标点击：

<p><input type='text' class='responseTime' name='responsetime' value='00:00:00' /></p>

<p><input type='text' class='mouseClick' name='mouseclick' value='0' /></p>

现在这是我的问题：

响应时间文本输入包含一个倒计时器。我想要的是，如果在问题中单击第一个按钮复选框，问题的响应计时器应该停止。这样我们就知道用户回答特定问题需要多长时间
鼠标点击文本以0开头，我希望此文本输入的内容是针对问题中单击的每个按钮复选框，问题的鼠标单击文本输入会计算点击量，因此我们知道如何许多点击用户编译的问题选项。

如何实现上述目标？

下面是一个jsfiddle，显示了一个问题的示例代码：

http://jsfiddle.net/zAFND/630/

更新：

显示多个问题示例的源代码：

QUESTION 1:

<p>
<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-A" value="A" />
<span>A</span>
</label>
</div>

<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-B" value="B" />
<span>B</span>
</label>
</div>

<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-C" value="C" />
<span>C</span>
</label>
</div>

<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-D" value="D" />
<span>D</span>
</label>
</div>

<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-E" value="E" />
<span>E</span>
</label>
</div>

<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-F" value="F" />
<span>F</span>
</label>
</div>

</p>

<p><input type='text' class='questionIds' name='questionids' value='73' /></p>


<p><input type='text' class='responseTime' name='responsetime' value='00:00:00' /></p>

<p><input type='text' class='mouseClick' name='mouseclick' value='0' /></p>



QUESTION 2:

<p>
<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-A" value="A" />
<span>A</span>
</label>
</div>

<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-B" value="B" />
<span>B</span>
</label>
</div>

<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-C" value="C" />
<span>C</span>
</label>
</div>

<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-D" value="D" />
<span>D</span>
</label>
</div>

<div id="ck-button">
<label class="fixedLabelCheckbox">
<input type="checkbox" name="options[]" id="option-E" value="E" />
<span>E</span>
</label>
</div>

</p>

<p><input type='text' class='questionIds' name='questionids' value='74' /></p>


<p><input type='text' class='responseTime' name='responsetime' value='00:00:00' /></p>

<p><input type='text' class='mouseClick' name='mouseclick' value='0' /></p>

Answer 1

为setinterval创建了一个很好的引用。现在，您可以删除第一个复选框的单击事件上的设置间隔，并在所有复选框上添加单击事件以增加计数器。

那将是

$(document).ready(function(){
var checkBox=$('#ck-button').find('input');
var responsetimer=//your interval function
checkbox.filter(':first').bind('click',function(e){
 clearInterval(responsetimer);
});
checkbox.bind('click',function(e){
$('.mouseClick').val(parseInt($('.mouseClick').val())+1);
});
});

我不确定你想要在第一次点击按钮或点击第一次按钮时停止计时器的问题。如果是第一次，请不要使用第一个绑定。在第二个绑定中保持清晰的间隔。

checkbox.bind('click',function(e){
 clearInterval(responsetimer);
 $('.mouseClick').val(parseInt($('.mouseClick').val())+1);
});

JS小提琴：http://jsfiddle.net/zAFND/631/ 第二种选择 http://jsfiddle.net/zAFND/638/

<强>更新如果你想用多个问题包装这个问题包含一个div <div class="queWrap"></div>

为您的间隔函数创建一个数组引用，以便它可以清除。

循环到每个queWrap并启动计时器并在复选框上分配事件。

检查多个问题的示例：http://jsfiddle.net/zAFND/640/

如何停止响应时间和计算鼠标点击次数

1 个答案: