Question

我有几行具有相同id的div，我希望将每个div的两个输入值相乘，并在更改val1输入或val2输入的值后在第三个输入中显示结果

HTML

<div class="uk-width-medium-9-10" id="commandligne">
    <div class="uk-grid uk-grid-small" data-uk-grid-margin>
        <div class="uk-width-medium-2-10">
            <label for="inv1">P.U. (€)</label>
            <input type="text" name="prix-item[]" class="md-input val1"  id="inv1"/>
        </div>
        <div class="uk-width-medium-2-10">
            <label for="inv2">Qté (H)</label>
            <input type="text" name="qte-item[]" class="md-input val2" id="inv2" />
        </div>
        <div class="uk-width-medium-2-10">
            <label for="inv3">Total(€)</label>
            <input type="text" name="total-item[]" class="md-input val3" value="0" id="inv3" readonly/>
        </div>
    </div>
</div>

我的JS根本不起作用

 $(document).ready(function () {
       $("#commandligne input").keyup(multInputs);

       function multInputs() {
           var mult = 0;
           // for each row:
           $("div#commandligne").each(function () {
               // get the values from this div:
               var $val1 = $('.val1', this).val();
               var $val2 = $('.val2', this).val();
               var $total = ($val1 * 1) * ($val2 * 1)
               $('.val3',this).val($total);
           });
       }
  });

当我更改2输入值时没有任何反应，那么我有0错误。

这里是Jsfiddle write(...)

Answer 1

Yeah, the fundamental issue that you are facing is that id attributes MUST be unique on a page in HTML. Browsers are flexible about this and don't really complain about it if you have duplicates, but both JavaScript and jQuery are not.

In both cases (getElementById in JavaScript and $("#aDuplicatedId") in jQuery), the logic will only capture a single DOM node/jQuery object . . . specifically the first one that it encounters in the DOM that has the specified id.

To do what you are trying to do, consider using a common class that you can select on. This will capture all instances and allow you to iterate through using your existing code.

Answer 2

考虑使用id属性

您当前正在追加具有相同ID的多个元素，这些元素无效。根据定义，id属性必须是唯一的：

id全局属性定义必须具有的唯一标识符（ID）在整个文档中是唯一的。其目的是识别元素链接（使用片段标识符），脚本或样式时（使用CSS）。

如果您需要定位多个元素，请考虑使用类或data-*属性来选择它们。或者，您可以跟踪“行”的数量并在每个ID后附加数字，并使用jQuery "starts-with" selector来定位它们：

确保定位动态元素

目前，您的事件处理程序不会定位将来可能添加到DOM的任何元素。您可能需要考虑使用.on()函数句柄来连接您的事件，这些事件将针对DOM中当前存在的事件以及将来可能添加的事件：

// Example using a class "command-row" as opposed to Id attributes
$(document).on('keyup',"div.command-row input",multInputs);

解析您的价值观

由于您正在对值进行算术运算，因此您需要确保实际上正在解析<input>元素的内容，而不是简单地检索其值的字符串版本。您可以使用parseInt()功能执行此操作：

// Parse your values
var $val1 = parseInt($('.val1', this).val());
var $val2 = parseInt($('.val2', this).val());
// Get your total
var $total = $val1 * $val2
// Set your value
$('.val3',this).val($total);

示例：全部放在一起

document.getElementById("test").onclick = function() {
  var ok = true;

  if (ok === true) {
    var html = [
      '<br/><br/>',
      '<div class="uk-grid  uk-margin-bottom"  data-uk-grid-margin>',
      '<div class="uk-width-medium-9-10 command-row">',
      '<div class="uk-grid uk-grid-small" data-uk-grid-margin>',
      '<div class="uk-width-medium-2-10">',
      '<label for="inv1">P.U. (€)</label>',
      '<input type="text" name="prix-item[]" class="md-input val1"  />',
      '</div>',
      '<div class="uk-width-medium-2-10">',
      '<label for="inv2">Qté (H)</label>',
      '<input type="text" name="qte-item[]" class="md-input val2"  />',
      '</div>',
      '<div class="uk-width-medium-2-10">',
      '<label for="inv3">Total(€)</label>',
      '<input type="text" name="total-item[]" class="md-input val3" value="0"  readonly/>',
      '</div>',
      '</div>',
      '</div>',
      '</div>'
    ].join('');

    var div = document.createElement('div');
    div.innerHTML = html;

    document.getElementById('testa').appendChild(div);
  }
};

$(document).ready(function() {
  $(document).on('keyup', "div.command-row input", multInputs);

  function multInputs() {
    var mult = 0;
    // for each row:
    $("div.command-row").each(function() {
      // get the values from this div:
      var $val1 = $('.val1', this).val();
      var $val2 = $('.val2', this).val();
      var $total = ($val1 * 1) * ($val2 * 1)
      $('.val3', this).val($total);
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testa">
  <div class="uk-grid  uk-margin-bottom" data-uk-grid-margin>
    <div class="uk-width-medium-9-10 command-row">
      <div class="uk-grid uk-grid-small" data-uk-grid-margin>
        <div class="uk-width-medium-2-10">
          <label for="inv1">P.U. (€)</label>
          <input type="text" name="prix-item[]" class="md-input val1" />
        </div>
        <div class="uk-width-medium-2-10">
          <label for="inv2">Qté (H)</label>
          <input type="text" name="qte-item[]" class="md-input val2" />
        </div>
        <div class="uk-width-medium-2-10">
          <label for="inv3">Total(€)</label>
          <input type="text" name="total-item[]" class="md-input val3" value="0" readonly/>
        </div>
      </div>

    </div>
  </div>
</div>
<div id="test" class="uk-grid" data-uk-grid-margin>
  <div class="uk-width-1-1">
    <div id="form_invoice_services"></div>
    <div class="uk-text-center uk-margin-medium-top uk-margin-bottom">
      <a href="#" class="md-btn md-btn-flat md-btn-flat-primary" id="invoice_form_append_service_btn">Ajouter une ligne</a>
    </div>
  </div>
</div>

如何将每个div的输入值乘以相同的id

2 个答案: