javascript - 无法从输入值获取预期的 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 View :

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

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

我该如何实现这一目标，请帮忙。

Answer 1

将 $namvevalue 声明为对象 var $namevalue={}。然后对于每个 .name 使用其值作为键，下一个输入 val 作为值。另请注意您的 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>