在输入中输入内容并单击按钮后,“。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或名称(如果使用表单将值发送到服务器)。

09-17 10:06
查看更多