如何使用jquery訪問數組對象中的輸入值

Question

我想創建一個函數來在我的HTML頁面上的<input>標記中保存數據。

當只有一個.awardBlock時，我使用功能saveData_0()，它工作正常。

但是，當我將我的列表.awardBlock添加到多個並使用功能saveData_1()時，它不起作用 - award_class的值似乎無法訪問。當我嘗試使用Jquery訪問它時，結果顯示undefined。

它困擾我，我整個下午都在調試，但仍然沒有結果出來。謝謝你分享你的時間，希望我能在這裏解決我的問題。

function saveData_0() { 
 
\t var prize = { 
 
\t \t name : $('.awardBlock').find('input[name=award_class]').val(), 
 
\t \t content : "cash" 
 
\t } 
 
\t alert("prize name: " + prize.name); 
 
\t alert("prize content: " + prize.content); 
 
} 
 

 
function saveData_1() { // when more than one "awardBlock", use this function 
 
\t var prize = new Array(); 
 
\t var numberOfBlock = $('.awardBlock').length; 
 
\t 
 
\t for(var i=0; i < numberOfBlock ; i++) { 
 
\t \t prize[i] = { 
 
\t \t \t name : $('.awardBlock:eq(i)').find('input[name=award_class]').val(), 
 
\t \t \t content : "cash" 
 
\t \t } 
 
\t } 
 
\t alert("prize name: " + prize[0] +', ' +prize[0].name); 
 
\t alert("prize content: " + prize[0] +', ' +prize[0].content); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul display-style:none> 
 
\t <li class="awardBlock" display-style: none> 
 
\t \t <ul> 
 
\t \t \t <li><input type="text" name="award_class" placeholder="一等獎"/></li> 
 
\t \t </ul> 
 
\t </li> 
 
\t <li class="awardBlock" display-style: none> 
 
\t \t <ul> 
 
\t \t \t <li><input type="text" name="award_class" placeholder="二等獎"/></li> 
 
\t \t </ul> 
 
\t </li> 
 
\t <!-- there maybe more than one "awardBlock" --> 
 
\t <li><input type="submit" value="save" onclick="saveData_1();"></li> 
 
</ul>

Answer 1

由於只有一個爲所有這些提交按鈕，你可以只是使所有的awardBlock作品的功能：

function saveData() { 
    $('.awardBlock').each(function(){ 
     var $this = $(this); 
    var prize = { 
      name : $this.find('input[name=award_class]').val(), 
      content : "cash" 
     } 
     alert("prize name: " + prize.name); 
     alert("prize content: " + prize.content); 
    }); 

}