无法从输入值获得预期的json输出

Question

我正在尝试但无法成功获得我预期的json输出，这是我的代码：

我的HTML

 <div class="form-field">

<input type='text' class='name' value="" >
<input name="" id="title" type="text" value="" size="40" aria-
  required="true" class='value'><input type="button" value="convert" 
 id="convert"/><br>
<input type='text' class='name' value="">
<input name="" id="title" type="text" value="" size="40" aria-
 required="true" class='value'>

</div>

我的js：

var $index=1;
 function convert(){

 var  $namevalue=[];

  $('.name').each(function () {
                    $namevalue.push($(this).val());
                });





 //   $namevalue=  $('.name').val();
 for(var i=0; i<$namevalue.length; i++){
//       
    $('.value').attr("name",$namevalue[i]); 
  }



 }
// var $index=1;
 $('#convert').click(function(){
 $index++;
 convert();
 });

上述代码的输出：

{"height":["blue","24"]}

HTML视图：

但我的预期输出是这样的：

{"color":"blue","height":27}

如何实现这一目标，请帮助。

Answer 1

将$ namvevalue声明为对象var $namevalue={}。然后，对于每个.name，将其值用作键，将下一个输入值用作值。 另请注意您的html是具有相同ID的多个元素，您不应该这样做。为每个元素使用不同的id。

var $index=1;
 function convert(){

 var  $namevalue={};

  $('.name').each(function () {
                $namevalue[$(this).val()] = $(this).next('input').val();
            });





 //   $namevalue=  $('.name').val();
 for(var i=0; i<$namevalue.length; i++){
//       
$('.value').attr("name",$namevalue[i]); 
  }

console.log($namevalue);

 }
// var $index=1;
 $('#convert').click(function(){
 $index++;
 convert();
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-field">

<input type='text' class='name' value="" >
<input name="" id="title1" type="text" value="" size="40" aria-
  required="true" class='value'><input type="button" value="convert" 
 id="convert"/><br>
<input type='text' class='name' value="">
<input name="" id="title2" type="text" value="" size="40" aria-
 required="true" class='value'>

</div>

Answer 2

您可以使用.each的索引参数访问具有相同索引的.value字段。您还必须将namevalue更改为对象而不是数组，因为您希望将对象作为输出。

e.g。

function convert() {

  var namevalue = {};

  var $vals = $('.value');
  $('.name').each(function(index) {
    namevalue[$(this).val()] = $vals.eq(index).val();
  });

  return namevalue;
}

$('#convert').click(function() {
  var namevals = convert();
  console.log(namevals);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-field">

  <input type='text' class='name' value="">
  <input name="" id="title" type="text" value="" size="40" aria- required="true" class='value'>
  
  <input type="button" value="convert" id="convert" /><br>
  
  <input type='text' class='name' value="">
  <input name="" id="title" type="text" value="" size="40" aria- required="true" class='value'>
  

</div>