Question

我是jquery的新手。我使用span文本设计了表单字段输入文本。

<div class="input-group" style="width:40%">
    <input type="text" name="emial" id= "emial" class="form-control" required="true"/>
    <span class="input-group-addon">@gmail.com</span>
</div>

我正在尝试获取jquery中的值

var emial=$("#emial").val();

但我只收到输入文字而不是@gamil.com

Answer 1

您需要在元素后立即获取span的文本内容。使用next()方法获取span元素并使用text()方法获取文本内容的位置。

var $email = $("#emial");
var email = $email.val() + $email.next().text();

$('#email').on('input', function() {
  var $email = $(this);
  var email = $email.val() + $email.next().text();
  console.log(email);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group" style="width:40%">
  <input type="text" name="email" id="email" class="form-control" required="true" />
  <span class="input-group-addon">@gmail.com</span>
</div>

Answer 2

Span不是输入标记。 val（）仅用于输入类型标记。

使用它像：

var emial = $("#emial").val() + $("#emial").next("span").text();

Answer 3

要获取span元素的值，请使用.text()或.html()

var emial =$("#emial").val() + $("#emial").next("span").text();

var emial=$("#emial").val() + $("#emial").next("span").text();
console.log(emial)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group" style="width:40%">
    <input type="text" name="emial" value="mail" id="emial" class="form-control" required="true"/>
    <span class="input-group-addon">@gmail.com</span>
</div>

Answer 4

您需要为span和div使用.text或.html方法

var email=$('.input-group-addon').text();

或

var email=$('.input-group-addon').html();

代替.input-group-addon为span调用Id调用相同的函数

Answer 5

main

您将获得html内容的完整结果

如何使用jquery获取span文本的值

5 个答案: