1

我正在制作一个表格来帮助某人进行课堂观察。该表格具有三个主要目标。

  1. 它必须是所有客户端，所以我使用的是 JavaScript。
  2. 它需要跟踪我已经完成的观察到的间隔总数。
  3. 它还需要计算每个单独选项的选择频率（例如，选择了多少次 1，选择了多少次 2，等等）这就是我卡住的地方。我觉得它应该是一个简单的 if 语句，并且类似于我以前解决我的第一个问题的代码，但我没有运气。任何帮助，将不胜感激。

如果它有所不同，总共有 144 个间隔。

这是我的表单示例和我正在工作的脚本，它解决了我的需求#2。

我的剧本

$('select[id*="interval"]').change(function() {
     total = 0;
    $('select[id*="interval"]').each(function() {
        total += (+this.value);
    });
    document.getElementById('result').innerHTML = total;
});

我的表格

脚本结果的打印位置

<td><label>Total # Of Observation Intervals:</label></td><td><span id="result">0</span></td>

我希望在哪里汇总选项

<tr>
<td><label>1. Lying Down:</label></td><td><span id="resultA">0</span></td><td>%</td>
<td><label>2. Sitting:</label></td><td><span id="resultB">0</span></td><td>%</td>
</tr>
<tr>
<td><label>3. Standing:</label></td><td><span id="resultC">0</span></td><td>%</td>
<td><label>4. Walking:</label></td><td><span id="resultD">0</span></td><td>%</td>
</tr>
<tr>
<td><label>5. Very Active:</label></td><td><span id="resultE">0</span></td><td>%</td>
</tr>

我的几个下拉菜单

<td><label class=select>Interval 1</label></td><td>Student Activity</td><td><select data-mini=true id="interval1">
<option value=0></option>
<option value=1 id="optA">1</option>
<option value=1 id="optB">2</option>
<option value=1 id="optC">3</option>
<option value=1 id="optD">4</option>
<option value=1 id="optE">5</option>
<option value=1 id="optF">6</option>
</select>
</td>

</td>
</tr>
<tr>
<td><label for=select-choice-4 class=select>Interval 2</label></td><td>Student Activity</td><td><select data-mini=true id="interval2">
<option value=0></option>
<option value=1>1</option>
<option value=1>2</option>
<option value=1>3</option>
<option value=1>4</option>
<option value=1>5</option>
<option value=1>6</option>
</select>
</td>

我试过的东西不起作用

$('select[id*="interval"]').options[1].value.change(function() {
            totalA = 0;
            $('select[id*="interval"]').options[1].value.each(function()  {
                totalA += (+this.value);
            });
            document.getElementById('resultA').innerHTML = totalA;
        });
4

1 回答 1

0

首先：总变量是否在 change(function(){}) 范围之外定义？它应该是。

其次：您的代码所做的是 - 每当每个选择发生变化时，它所做的第一件事就是将总数设置为 0 - 难怪为什么总数是错误的。

第三：确保您了解 $().each 和 $().change 的作用，因为整个程序流程似乎有缺陷

此外：您不应该在同一个选择中重复多次类似的值

我不明白你的目标到底是什么，但这里的代码完成了类似的事情：

    var totals = { //totals
            interval1: {
                optionA: 0,
                //...
                optionZ: 0
            },
            interval2: {
                optionA: 0, //total hits for: <select id="interval2"> <option value="optionA">
                optionB: 0,
                optionC: 0
            }
            //etc...
    };

    $('select[id*="interval"]').each(function(){
        $(this).change(function(){ //attach onchange event to each of the selects
            var $s = $(this);
            if(totals[$s.attr('id')]){
                totals[$s.attr('id')][$s.val()] += 1;
                //update the span corresponding to the particular select and the particular option value:
                $('#result_for_' + $s.attr('id') + '_' + $s.val()).text(totals[$s.attr('id')][$s.val()]);
            }
        })
    });

这是一个基于每个选项的唯一值的解决方案（每个选择，它们可以在选择之间重复）

这个解决方案也不是最优的——你不应该在每次想要更新它时搜索 DOM 以查找 $('#result_for_' + ....)。你应该记住所有的计数器。

祝你好运！

于 2013-10-30T15:27:19.623 回答