jQuery 在循环中使用 keyup 函数

Question

情况是这样的

我有多个字段，根据月份具有不同的字段名称。

以下是示例字段名称：

     <input type="text" name="month-numbers" id="month-revenue-1" /> 
     <input type="text" name="month-numbers" id="month-revenue-2" /> 
     <input type="text" name="month-numbers" id="month-revenue-3" /> 
     ..........
     <input type="text" name="month-numbers" id="month-revenue-12" /> 

在我的 javascript 中，我在 javascript 中创建了实际的数组：

     var actualMonths = [1,2,3,4,5,6,7,8,9,10,11,12];

现在，这是我的循环：

      for (i=0;  i < actualMonths.length; i++) {
           $('input#month-revenue-'+month).keyup(function(){
                revenue = $(this).val();
                margin = $('input#month-margin-'+month).val();
                value = (margin / 100) * revenue;
                value = value.toLocaleString("en-US");
                $('#month-price-'+month).html(value);
           });
      }

它正在从正确的字段中获取数据，但是，在 keyup 函数中，它似乎试图将数据放在循环的末尾。 为什么会这样？

我的预期结果是每个字段的计算方式不同。 例如，month-revenue-1 应该计算这些值。

Answer 1

如果将keyup处理函数附加到父 html 元素，则相同的函数可以处理所有子元素的事件。 使用e.target知道哪个输入触发了事件。

 $('#months').keyup(function(e) { let month = e.target.id.split('-')[2]; let revenue = $(e.target).val(); let margin = $('input#month-margin-' + month).val(); let value = (Number(margin) / 100) * Number(revenue); $('#month-price-' + month).html(value); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="months"> <input type="text" name="month-numbers" id="month-revenue-1" /> <input type="text" name="month-margins" id="month-margin-1" /> <span id="month-price-1"></span> <br /> <input type="text" name="month-numbers" id="month-revenue-2" /> <input type="text" name="month-margins" id="month-margin-2" /> <span id="month-price-2"></span> </div>