Question

我正在尝试创建一个投票风格系统，用户可以从2个不同的单选按钮组中选择2个数字。

我已经能够做到这一点，但我觉得它没有像它应该那样优化：

function updateQuality() {
var quality = document.getElementsByClassName('quality');
for (var i = 0, length = quality.length; i < length; i++) {
    if (quality[i].checked) {
        totalQuality = parseInt(quality[i].value);
        break;
    }
}
qualityVal = totalQuality;    
document.getElementById('totalQuality').innerHTML = qualityVal;
}

无论如何要结合这些功能吗？

我不想

的onclick =“updateService（）;

在每个单选按钮上......

Answer 1

您可以简化和干掉代码。首先向容器添加data属性，以确定应使用哪个元素来显示总数：

<div id="quality" data-target="totalQuality">
    <input type="radio" class="quality" name="quality" value="1" />
    <input type="radio" class="quality" name="quality" value="2" />
    <input type="radio" class="quality" name="quality" value="3" />
</div>
<div id="service" data-target="totalService">
    <input type="radio" class="service" name="service" value="1" />
    <input type="radio" class="service" name="service" value="2" />
    <input type="radio" class="service" name="service" value="3" />
</div>

<br>

<span id="totalQuality">0</span>
<span id="totalService">0</span>

然后你可以删除onclick属性并使用jQuery将单个事件处理程序附加到所有无线电：

$('#quality input, #service input').change(function() {
    var total = $(this).parent().data('target');
    $('#' + total).html($(this).val());
});

Example fiddle

Answer 2

由于您使用的是jQuery，因此可以删除onclick属性并执行

$('#quality').on('change', '.quality', updateQuality);
$('#service').on('change', '.service', updateService);

你脚本中的

要使用单一方法，您可以更改一下html以指定每个组的目标（显示值）

<div id="quality" data-target="#totalQuality">
    <input type="radio" class="quality" name="quality" value="1">
    <input type="radio" class="quality" name="quality" value="2" >
    <input type="radio" class="quality" name="quality" value="3">
</div>

<div id="service" data-target="#totalService">
    <input type="radio" class="service" name="service" value="1">
    <input type="radio" class="service" name="service" value="2">
    <input type="radio" class="service" name="service" value="3">
</div>

然后你可以做到

function update() {
    var target = $(this).closest('[data-target]').data('target');
    $(target).text(this.value);
}

$('#quality, #service').on('change', 'input', update);

但它不会更新全局变量（如果你需要那些）

Answer 3

你可以在函数内部添加一个参数然后在里面放一个条件像这样......

function updateVote(str) {
    var data = document.getElementsByClassName(str);
    for (var i = 0, length = data.length; i < length; i++) {
        if (data[i].checked) {
           totalCount = parseInt(data[i].value);
           break;
        }
    }
    val = totalCount; 
    if(str=="quality")
       document.getElementById('totalQuality').innerHTML = val;
    }
    else{
       document.getElementById('totalService').innerHTML = val;
    }

你的html文件上的

..

onclick="updateVote('service')"

或

onclick="updateVote('quality')"

结合Javascript函数

3 个答案: