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更改爲對象而不是數組，因爲您期望將對象作爲輸出。

例如

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>