Question

我很难找到问题。

代码背后的想法：动态地将事件监听器“oninput”分配给由“classes”数组中存储的类确定的页面上的特定输入。

问题：函数PassValue不处理任何元素事件，其中class与“classes”数组中的最后一个索引不同（仅处理数组中的最后一个类）。

当我改变“class”数组元素的顺序时，它会导致处理不同的类 - 再次在数组的最后一个索引上进行类。

当我将鼠标悬停在控制台元素的第一部分时，“Datum”应该高亮，就像“Blast KD”在第二部分一样。它的简化表示当我在其中键入内容时，相同的文本应该出现在它们下面的输入中，但这仅适用于其中一个。

问题： 有谁知道它为什么会发生以及如何解决它（所以所有输入都被处理了）？

$(function() {
  $('.constant-select-form-numeric').attr('list', 'consoptions-numeric');
  $('.constant-select-form-numeric-NT').attr('list', 'consoptions-numeric-NT');
  $('.constant-select-form-date').attr('list', 'consoptions-date');
});

$(document).ready(function() {
  var classes = ['.constant-select-form-date', '.constant-select-form-numeric', '.constant-select-form-numeric-NT'];
  var form = $(document).find('form');
  for (var j = 0; j < classes.length; j++) {
    var c = classes[j];
    //console.log(c);
    var e = $(document).find(c);
    if (e.length > 0) {

      // ... switch(c) differentiating classes from each other(assingning atributes)
      switch (c) {
        case '.constant-select-form-date':
          form[0].innerHTML += "<datalist id='consoptions-date'>\n\
<option data-value='-1'>Unknown</option>\n\
</datalist>";
          break;
        case '.constant-select-form-numeric-NT':
          form[0].innerHTML += "<datalist id='consoptions-numeric-NT'>\n\
<option data-value='-2'>NT</option>\n\
</datalist>";
          break;
        default:
          form[0].innerHTML += "<datalist id='consoptions-numeric'>\n\
<option data-value='-3'>NA</option>\n\
</datalist>";
          break;
      }

      // assign EventListener to each element of c
      for (var i = 0; i < e.length; i++) {
        var element = $("input[for=" + e[i].attributes.for.value + "]")[0];
        var hidden = $("input[name=" + e[i].attributes.for.value + "]")[0];
        element.value = hidden.value;
        element.addEventListener("input", function(elem) {
          PassValue(elem.target);
        });
        PassValue(element);
        //print element DOM
        console.log(element);
      }
    }
  }
});

function PassValue(element) {
  console.log(element);
  var x = element.value;
  console.log(x);
  // rest of function...
  var hiddenInput = $(document).find("input[name=" + element.attributes.for.value + "]")[0];
  hiddenInput.value = x;
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<html>

<body>
  <form>
    <fieldset class="form-group">
      <label for="datum">Datum: </label>
      <input for=datum class="form-control constant-select-form-date">
      <input type="text" name="datum" id="frm-newMessageForm-datum">
    </fieldset>
    <fieldset class="form-group">
      <label for="datum1">Datum1: </label>
      <input for=datum1 class="form-control constant-select-form-date">
      <input type="text" name="datum1" id="frm-newMessageForm-datum1">
    </fieldset>
    <fieldset class="form-group">
      <label for="blast_kd">Text: </label>
      <input for=blast_kd class="form-control constant-select-form-numeric">
      <input type="text" name="blast_kd" id="frm-newMessageForm-blast_kd">
    </fieldset>
    <fieldset class="form-group">
      <label for="blast_kd1">Text1: </label>
      <input for=blast_kd1 class="form-control constant-select-form-numeric">
      <input type="text" name="blast_kd1" id="frm-newMessageForm-blast_kd1">
    </fieldset>    
  </form>
</body>

</html>

没关系，我在不同的层上用完全不同的方法解决了它。（添加db常量字段应该在不同的层中，而不是在js中）

动态分配多个类的事件侦听器无效

0 个答案: