Question

所以我在页面上的四个输入（高度，重量，年龄，性别）上使用querySelectorAll，并为每个输入添加更改事件。

var inputs = document.querySelectorAll('input');

input.addEventListener('change', changeValue));

如果我想创建一个包含所有项值的字符串，在循环期间，我该怎么做？

function changeValue() {
  this.name === 'weight' ? this.value + 'lbs' + this.name === 'height' ? this.value + 'inches';
}

基本上，我不确定如何在不使用通用索引的情况下从循环中获取特定输入值。

Answer 1

嗯，你有点对待三元运算符? :。不过，这是我的实施方式。上面提供的答案可以做，但我喜欢保留一个映射对象，不需要我写一个case表达式，它也更干净。

    var inputs = document.querySelectorAll('input');
  //var inputs = Array.prototype.slice.call(document.querySelectorAll('input')) for older browsers not supporting forEach on Node lists


    function changeValue(){
      var mapped = {
         "weight":" lbs",// note the extra space is intentional
         "height":" inches" // note the extra space is intentional
      }
      this.value = this.value + mapped[this.name];

    }
    inputs.forEach(function(e){
        e.addEventListener('change', changeValue);
    })

在这里工作小提琴：https://jsfiddle.net/aminajani17/abbxbLoo/

Answer 2

“如果我想创建所有项目值的字符串”

你可以forEach他们。此外，在Javascript中处理集合时我经常使用的一种方法是在数组中使用function getInputItems(inputs) { var inputItems = {}; Array.from(inputs).forEach(function(item) { inputItems[item.name] = inputItems[item.value]; }); return JSON.stringify(inputItems); }进行迭代。

这样的事情可以毫不费力地做到：

querySelectorAll

<强>编辑：

似乎forEach自ES5起实现querySelectorAll，因此不需要在体面的浏览器上将Array.from结果转换为{{1}}。

Answer 3

querySelectorAll返回一个nodeList，可以使用ECMAScript 5 forEach循环进行循环，但是您需要能够识别每个元素的东西。 id通常是最好的方式：

var inputs = document.querySelectorAll('input');
var results = "";

inputs.forEach(function(input){
   input.addEventListener('change', changeValue));

   var postfix = "";

   // check the current input's id and determine the correct
   // unit of measurement/qualification for the element's value
   switch(input.id){
     case "height" :
       postfix = "inches";
       break;
     case "weight" :
       postfix = "lbs";       
       break;
     case "age" :
       postfix = "years";       
       break;
     case "gender" :
       postfix = "gender";       
       break; 
   }

   // Append the input's value and unit of measurement/qualification
   // to a string
   results += "," + input.value + postfix;
});

// output the final string
console.log(results);

如何获取nodeList中某个节点的值？

3 个答案: