Question

目标

我尝试创建一个按钮，Onclick将每个个体值重置为每个输入值的原始值。

我在此处设置了Codepen示例： http://codepen.io/coryk/pen/QEGrXp

问题

当用户点击重置按钮时，它会重置，但它会重置为第一个输入值，我需要将其重置为每个单独的值。

这是我的代码：

HTML

   <tr>
      <td>Max Pumping Distance</td>
    <td>
        <input name="custom_coverage" class="input_green custom_coverage" id="max-pumping" type="number" value="44000">
    </td>
    <td>ft</td>
</tr>

<br/>
<tr>
    <td>Avg. Pumping Distance</td>
    <td>
        <input name="custom_coverage"  class="input_green custom_coverage"  id="avg-pumping-distance" type="number" value="30000">
    </td>
    <td>ft</td>
</tr>

<br/>
<tr>
    <td>Head Pressure</td>
    <td>
        <input name="custom_coverage"  class="input_green custom_coverage"  id="avg-pumping-distance" type="number" value="45000">
    </td>
    <td>ft</td>
</tr>
<br/>

<button id="reset">Reset</button>

的JavaScript

//Reset to Default Input values 
var $input = $('.custom_coverage'),
    $reset = $('#reset')
$('#reset').data('default', $input.val() );

$reset.on('click', function() {
   $input.val($(this).data('default')); 
});

Answer 1

您需要单独设置每个输入：

$reset.on('click', function() {
  $input.each(function(i) {
    $(i).val($(i).data('default'));
  }); 
});

```

Answer 2

您可以先为每个输入字段分配一个新属性并将原始值存储在那里，然后您可以执行以下操作：

$(document).ready(function () {


  $('#reset').on('click', function() {
     $('.custom_coverage').each(function () {
        var orgValue = $(this).attr('data-value');
      $(this).val(orgValue);
     });
  });
});

请参阅我的jsfiddle示例：https://jsfiddle.net/fictus/gusff8ep/

输入重置为值

2 个答案: