Zugriff auf Eingabewert in einem Array-Objekt mit jquery

Question

Ich möchte eine Funktion erstellen, um Daten unter dem <input> Tag auf meiner HTML-Seite speichern unten. Wenn es nur eine .awardBlock gibt, verwende ich die Funktion saveData_0() und es funktioniert gut.

Aber wenn ich meine Liste .awardBlock zu mehr als einem hinzufügen und Funktion saveData_1() verwenden, funktioniert es nicht - der Wert von award_class scheint nicht zugegriffen werden kann. Das Ergebnis zeigt undefined, wenn ich versuche, mit Jquery darauf zuzugreifen.

Es stört mich und ich habe für den ganzen Nachmittag debugged, aber immer noch kein Ergebnis herauskommen. Danke für das Teilen Ihrer Zeit, ich hoffe, ich kann mein Problem hier lösen.

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

Da es nur einen Submit-Button für alle von ihnen ist, können Sie nur eine Funktion machen, die für alle awardBlock s funktioniert:

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); 
    }); 

}