javascript - Jquery for循环设置所选选项属性的输入值仅更改最后一个值

Question

我想简化这 block 代码(实际上更长)，它运行得很好:

$(document).ready(function() {
  $("#PayRate1").change(function() {
           $('#HourlyRate1').val($('option:selected', this).data('rate'));
  });
  $("#PayRate2").change(function() {
           $('#HourlyRate2').val($('option:selected', this).data('rate'));
  });
  $("#PayRate3").change(function() {
           $('#HourlyRate3').val($('option:selected', this).data('rate'));
  });
  $("#PayRate4").change(function() {
           $('#HourlyRate4').val($('option:selected', this).data('rate'));
  });
  $("#PayRate5").change(function() {
           $('#HourlyRate5').val($('option:selected', this).data('rate'));
  });
  $("#PayRate6").change(function() {
           $('#HourlyRate6').val($('option:selected', this).data('rate'));
  });
  $("#PayRate7").change(function() {
           $('#HourlyRate7').val($('option:selected', this).data('rate'));
  });
});

所以我做了以下循环:

$(document).ready(function() {
    for(i=1;i<7;i++){
        $('#PayRate'+i).change(function() {
            $('#HourlyRate'+i).val($('option:selected', this).data('rate'));
          });
        }
});

但是，当我从选择 #PayRate1 到 PayRate6 中选择任何选项时，它们不会导致相应的 #HourlyRate 更改，而是全部更改 #HourlyRate7。如果我更改#PayRate7，则不会发生任何变化。

我的错误是什么？我对这一切都很陌生，这是我第一次尝试编写循环，因此了解为什么我的循环会导致此问题对于学习非常有帮助。

编辑:

这是它所作用的 html:

        <?php
        $numbers = range(1,14);
        foreach ($numbers as $number)
        {
          echo '<div class="row">';
          echo '  <div class="input-field col-1">';
          echo '    <input type="text" class="validate" id="Date'.$number.'" value="" name="Date'.$number.'" readonly="readonly" required="" aria-required="true">';
          echo '  </div>';
          echo '  <div class="input-field col-1">';
          echo '    <input type="text" class="validate" id="Day'.$number.'" value="" name="Day'.$number.'" readonly="readonly" required="" aria-required="true">';
          echo '  </div>';
          echo '  <div class="input-field col-1">';
          echo '    <select name="PayRate'.$number.'" id=PayRate'.$number.'>';
          echo "      <option value='' disabled='disabled'>Select Rate</option>";
          echo "      <option data-rate='".$Rate1."' value='".$RateName1."'>".$RateName1."</option>";
          echo "      <option data-rate='".$Rate2."' value='".$RateName2."'>".$RateName2."</option>";
          echo "      <option data-rate='".$Rate3."' value='".$RateName3."'>".$RateName3."</option>";
          echo "      <option data-rate='".$Rate4."' value='".$RateName4."'>".$RateName4."</option>";
          echo '    </select>';
          echo '  </div>';
          echo '  <div class="input-field col-1">';
          echo '    <input type="text" class="RateValue" id="HourlyRate'.$number.'" name="HourlyRate'.$number.'" readonly="readonly" required="" aria-required="true">';
          echo '  </div>';
          echo '  <div class="input-field col-1">';
          echo '    <input type="text" class="validate" id="Hours'.$number.'" name="Hours'.$number.'" required="" aria-required="true">';
          echo '  </div>';
          echo '  <div class="input-field col-1">';
          echo '    <input type="text" class="validate" id="Overtime'.$number.'" name="Overtime'.$number.'" required="" aria-required="true">';
          echo '  </div>';
          echo '</div>';

      }
      ?>

Answer 1

添加一个数据属性来存储其附加的输入元素:

<input id="HourlyRate1" type="text" value="" />
<input id="HourlyRate2" type="text" value="" />
<select data-hr-id="HourlyRate1">
<select data-hr-id="HourlyRate2">

在js中

$(document).ready(function() {
    // get all select elements having our custom data attribute
    // then attach the change evenet listener on all of them
    $('select[data-hr-id]').change(function() {
       // the current select element who fired the this event
       var $sel = $(this);
       // the input we need to update
       var $inp = $('#'.concat($sel.attr('data-hr-id')));
       // get the selected option and use its data-rate attribute
       var val = $sel.find('option:checked').data('rate');
       // set it as the new value of our attached input element
       $inp.val(val);
    });
});

未经测试，但应该可以工作。

编辑:简化并添加注释