jQuery for循環從選定選項的屬性設置輸入值，僅更改最后一個值

Question

我想簡化這段代碼（實際上要長得多），它可以正常運行：

$(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);
    });
});

未經測試，但應該可以。

編輯 ：簡化和添加注釋

Answer 2

當'change'事件觸發時，循環結束，因此var i為7。

您應該將i值存儲在某個地方。

我現在無法對其進行測試，但是也許您可以這樣做：

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