如何使用jquery访问数组对象中的输入值

时间:2016-07-29 12:23:36

标签: jquery arrays object

我想在下面的HTML页面上的<input>标记之间创建一个保存数据的函数。

当只有一个.awardBlock时,我使用函数saveData_0(),它运行正常。

但是当我将列表.awardBlock添加到多个并使用函数saveData_1()时,它不起作用 - 似乎无法访问award_class的值。当我尝试使用Jquery访问它时,结果显示undefined

困扰我,我整个下午都在调试,但仍然没有结果出来。感谢您分享您的时间,希望我能在这里解决我的问题。

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

function saveData_1() { // when more than one "awardBlock", use this function
	var prize = new Array();
	var numberOfBlock = $('.awardBlock').length;
	
	for(var i=0; i < numberOfBlock ; i++) {
		prize[i] = {
			name : $('.awardBlock:eq(i)').find('input[name=award_class]').val(),
			content : "cash"
		}
	}
	alert("prize name: " + prize[0] +', ' +prize[0].name);
	alert("prize content: " + prize[0] +', ' +prize[0].content);
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul display-style:none>
	<li class="awardBlock" display-style: none>
		<ul>
			<li><input type="text" name="award_class" placeholder="一等奖"/></li>
		</ul>
	</li>
	<li class="awardBlock" display-style: none>
		<ul>
			<li><input type="text" name="award_class" placeholder="二等奖"/></li>
		</ul>
	</li>
	<!-- there maybe more than one "awardBlock" -->
	<li><input type="submit" value="save"  onclick="saveData_1();"></li>
</ul>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

由于所有这些按钮只有一个提交按钮,因此您可以创建一个适用于所有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);
    });

}