が出入力から入れ、予想されるJSONは私がしようとしていますが、私の予想されるJSON出力を得るために成功することはできません

Question

値取得できません、ここに私のコードです：

私の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に対して、その値をキーとして使用し、次に値としてvalを入力します。 また、同じIDを持つ複数の要素としてhtmlを書き留めてください。そうしてはいけません。各要素に異なるidを使用する。あなたが同じインデックスを持つ.valueフィールドにアクセスするために.eachのインデックスパラメータを使用することができます

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

。また、オブジェクトを出力として想定する場合は、namevalueを配列ではなくオブジェクトに変更する必要があります。

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>