在输入中输入内容并单击按钮后,“。val()”将返回一个空值,为什么?
HTML代码:
<div class="mainClass">
<div class="class1" >
<div class="class2">
<h3>Settings 1</h3>
<label>
<span>Text 1:</span>
<input type="text" name="text">
</label>
<label>
<span>Text 2:</span>
<input type="text" name="text2">
</label>
</div>
</div>
<div class="class3" >
<div class="class4">
<h3>Settings 2</h3>
<label>
<span>Text 1:</span>
<input type="text" name="text">
</label>
<label>
<span>Text 2:</span>
<input type="text" name="text2">
</label>
</div>
</div>
</div>
<button id="Go" class="go" >GO </button>
JAVASCRIPT代码:
$('#Go').on('click', function() {
alert($('.class1 input').val()); //return an empty value
$('.class1 input').val("test");
alert($('.class1 input').val()); //return test
});
编辑:
即使这样也不起作用,这里我只有一个输入,所以我不能输入错误的输入:
<div class="mainClass">
<div class="class1" >
<div class="class2">
<h3>Settings 1</h3>
<label>
<span>Text 1:</span>
<input type="text" name="text">
</label>
</div>
</div>
</div>
<button id="Go" class="go" >GO </button>
编辑2:我发现了问题的开始...
当我这样做时:
$('.class1 input').each(function () {
alert($(this).attr('name') + " value:" +$(this).val() );
});
我得到两个这样的“警报”:
text value:
text value:myinputText
因此,在我的HTML中为其中一个创建了两个,第一个为空,第二个运行良好!
仔细查看我的页面,我发现所有元素都是重复的(
<select,field, input...
)知道这怎么可能吗?我是否两次打电话给我的html文件?
而且我所有的代码都在弹出窗口中(我不知道它是否可以帮助您)
(我是Javascript和jQuery的新手)
谢谢
最佳答案
匹配'.class1 input'
的元素不止一个。您可能没有填写其中的第一个。
从the documentation:
当val('text')
填充所有匹配的元素时:
这就是为什么您在第二个警报中看到某些内容的原因。
您最好使用更具选择性的选择器。通常,我们使用id或名称(如果使用表单将值发送到服务器)。