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'));
    });
  }
});

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

2 个答案: