javascript - 将多个 HTML 输入更改为不同的值

Question

我有一个 HTML 表单，用户可以在其中输入他/她打算花在多项任务上的时间:

<form>
<div class='row radio-online'>
  <div class='col-xs-2'>
    <input type='radio' name='time' id='minutes' value='minutes' />Minutes
  </div>
  <div class='col-xs-2'>
    <input type='radio' name='time' id='hours' value='hours' />Hours
  </div>
</div>
<div>
  <div><input type='text' name='time_task1' id='time_task1' value='' /></div>
  <div><input type='text' name='time_task2' id='time_task2' value='' /></div>
  <div><input type='text' name='time_task3' id='time_task3' value='' /></div>
</form>

我想要的是将输入的值转换为分钟或小时，具体取决于单选组“时间”上选择的选项。我在 jQuery 中尝试过:

$("input[name='time']:radio").change(function() {
  if($("input:checked[name='time']:radio").val() == 'minutes') {
// this attempts to get every input that has an id starting with time_task
    $("[id^='time_task']").val($("[id^=time_task]").val() * 60);
  }
  else {
    $("[id^='mins']").val($("[id^=mins]").val() / 60);
  }
});

问题是，当我尝试这样做时，它确实进行了转换，但只有第一个输入的值被转换，此外，它的值被复制到所有其他输入，但正确的是每个值都有其单独转换的值。我发现的例子就是这样做的，但这不是我的情况。有什么建议吗？

Answer 1

这是因为当你这样做

$("[id^='time_task']").val($("[id^=time_task]").val() * 60);

选择器$("[id^='time_task']")返回多个元素但一旦你使用 .val() 它就会获取第一个元素。

相反，循环遍历集合中的每个元素，如下所示:

$("[id^='time_task']").each(function(){ $(this).val( $(this).val() * 60) })