保持js對象中每個輸入的值

Question

我需要將每個輸入的值保留在js對象中。 這是我的html代碼：

<div class="produs_varianta"> 
     <input type="text" class="product_name" value="Product One"> 
     <input type="text" class="product_code" value="Code One"> 
</div> 
<div class="produs_varianta"> 
     <input type="text" class="product_name" value="Product Two"> 
     <input type="text" class="product_code" value="Code Two"> 
</div> 
<div class="produs_varianta"> 
     <input type="text" class="product_name" value="Product Three"> 
     <input type="text" class="product_code" value="Code Three"> 
</div> 

我的.js代碼：

var variante = $('.produs_varianta'); 
var produs_varianta = []; 
variante.each(function(index){ 
    produs_varianta.push(
    { 
     'produs' : 'the value of product_name', 
     'cod' : 'the value of product_code 
    } 
    ); 
}); 

** 我嘗試使用$（本）。兒童（ 'PRODUCT_NAME'）VAL（ ）但我沒有定義！ **

Answer 1

使用.find()爲$(this).find(".class").val()

var variante = $('.produs_varianta'); 
 
var produs_varianta = []; 
 
variante.each(function() { 
 
    produs_varianta.push({ 
 
    'produs': $(this).find(".product_name").val(), 
 
    'cod': $(this).find(".product_code").val() 
 
    }); 
 
}); 
 

 
console.log(produs_varianta)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="produs_varianta"> 
 
    <input type="text" class="product_name" value="Product One"> 
 
    <input type="text" class="product_code" value="Code One"> 
 
</div> 
 
<div class="produs_varianta"> 
 
    <input type="text" class="product_name" value="Product Two"> 
 
    <input type="text" class="product_code" value="Code Two"> 
 
</div> 
 
<div class="produs_varianta"> 
 
    <input type="text" class="product_name" value="Product Three"> 
 
    <input type="text" class="product_code" value="Code Three"> 
 
</div>

Answer 2

您需要添加一個jQuery功能這一點。你的HTML是

<div class="produs_varianta"> 
     <input type="text" class="product_name" value="Product One"> 
     <input type="text" class="product_code" value="Code One"> 
</div> 
<div class="produs_varianta"> 
     <input type="text" class="product_name" value="Product Two"> 
     <input type="text" class="product_code" value="Code Two"> 
</div> 
<div class="produs_varianta"> 
     <input type="text" class="product_name" value="Product Three"> 
     <input type="text" class="product_code" value="Code Three"> 
</div> 

而且jQuery將成爲這個

var result = []; 
$('.produs_varianta').each(function() { 
    var elem = $(this); 
    var obj = { 
    'product_name': elem.find('.product_name').val(), 
    'product_code' : elem.find('.product_code').val() 
    }; 
    result.push(obj);  
}); 

console.log(result); 

這是肯定的，它工作得很好的JSFIDDLE

Answer 3

$(document).ready(function() { 
    var variante = $('.produs_varianta'); 
    var produs_varianta = []; 
    variante.each(function (index) { 
     produs_varianta.push(
     { 
      'produs': $(this).find('.product_name').val(), 
      'cod': $(this).find('.product_code').val() 
     } 
     ); 
    }); 

    // NOW READ THE PRODUCTS AND ITS CODES. 
    $.each(produs_varianta, function (key) { 
     alert(produs_varianta[key].produs + ': ' + produs_varianta[key].cod); 
    }); 
});