javascript - 组合多个字段中的文本字段集

Question

这是我的代码。这是我的文本字段。可以多于1套。在这个例子中我有 3 套。

<DIV class="product-item float-clear">
<DIV class="float-left"><input type="checkbox" name="item_index[]"/></DIV>
<DIV class="float-left"><input type="text" name="item_name[]" class="webcampics" /></DIV>
<DIV class="float-left"><select id="status"  class="webcampics" >
<option value="Y">Yes</option>
<option value="N">No</option>
<option value="M">Maybe</option>
</select></DIV>
</DIV>

这是我的 Jquery。

 var inputs = document.getElementsByClassName('webcampics'),
                names = [].map.call(inputs, function (input) {
            return input.value;
        }).join('|');

输出为:

a@mail.com|Y|b@mail.com|Y|c@mail.com|Y

预期输出是:

a@mail.com|Y;b@mail.com|Y;c@mail.com|Y

Answer 1

使用nodeName检查要添加新字符并进行字符串连接的输入。

names = [].map.call(inputs, function (input) {
     var tempStr =  input.value;
     if(input.nodeName == "SELECT")
     {
         tempStr += ";";
     }
     return tempStr;
}).join('|');

仅供引用，您也可以使用 each() 来实现相同的目的。

$('button').click(function(){

var inputs = document.getElementsByClassName('webcampics'),
    
names = [].map.call(inputs, function (input) {
            var tempStr =  input.value;
            if(input.nodeName == "SELECT")
            {
              tempStr += ";";
            }
            else
            {
              tempStr += "|";  
            }
            return tempStr;
        }).join("");
console.log(names);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<DIV class="product-item float-clear">
<DIV class="float-left"><input type="checkbox" name="item_index[]"/></DIV>
<DIV class="float-left"><input type="text" name="item_name[]" class="webcampics" /></DIV>
<DIV class="float-left"><select id="status"  class="webcampics" >
<option value="Y">Yes</option>
<option value="N">No</option>
<option value="M">Maybe</option>
</select></DIV>

  <DIV class="float-left"><input type="checkbox" name="item_index[]"/></DIV>
<DIV class="float-left"><input type="text" name="item_name[]" class="webcampics" /></DIV>
<DIV class="float-left"><select id="status"  class="webcampics" >
<option value="Y">Yes</option>
<option value="N">No</option>
<option value="M">Maybe</option>
</select></DIV>
  
</DIV>
<button>GET OUTPUT</button>