7

在输入中输入内容并单击按钮后，“.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 的新手）

谢谢

4

5 回答 5

11

有不止一个元素匹配'.class1 input'。你可能没有填满这组的第一个。

从文档中：

获取匹配元素集中第一个元素的当前值。

虽然val('text')填充所有匹配元素：

设置匹配元素集中每个元素的值

这就是为什么您在第二个警报中看到某些内容的原因。

您最好使用更具选择性的选择器。如果使用表单将值发送到服务器，通常我们使用 id 或名称。

于 2013-06-18T13:39:14.067 回答
3 
$('.class1 input').val()

指两个元素

<input type="text" name="text">

和

<input type="text" name="text2">
于 2013-06-18T13:39:42.567 回答
1

您有多个匹配的元素。

来自jQuery 文档

.val()

获取匹配元素集中第一个元素的当前值或设置每个匹配元素的值。

您只会将匹配集的第一个元素作为文档状态。如果你想要所有的值，你需要循环这个集合。

于 2013-06-18T13:39:39.647 回答
0

我有一个类似的问题 Chrome 反复告诉我 .val() 不是一个函数，而不是使用 .val() 我必须使用 .value 这为我完成了工作希望它对你有用。

于 2019-07-09T22:32:54.900 回答
0

将您的 Jquery 代码包装在Document-ready块周围：

$('document').ready(function(){});

像这样：

$('document').ready(function(){
    $('#Go').on('click', function() {
        alert($('.class1 input').val());    //return an empty value 
        $('.class1 input').val("test");
        alert($('.class1 input').val());    //return test
    });
});

即使在谷歌搜索和 Stackoverflow 的大力帮助下，我们还是花了 1 个小时来确定这个问题。

于 2017-07-22T06:57:15.540 回答