0

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

        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>

}

现在下面我有 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>

现在这是我的问题：

  1. 响应时间文本输入包含一个递增计时器。我想要的是，如果在问题中单击第一个按钮复选框，则问题的响应计时器应该停止。这样我们就可以知道用户回答特定问题需要多长时间

  2. 鼠标单击文本以 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>
4

1 回答 1

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/

于 2013-02-09T04:20:06.007 回答