Question

我有一个HTML页面，其中包含一些输入字段的默认值。这是HTML和JavaScript：

$('#trigger').click(function () {
            var content = $(this).parent().find('.content');
            content.find('#name').val("Young man");
            content.find('#age').val("25");

            alert(content.find('#name').val());
            alert(content.html());
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
        <a id="trigger" href="#">Know!</a>
        <div class="content">
            <div>
                <label>Name:</label>
                <input type="text" id="name" value="dummy">
            </div>
            <div>
                <label>Age:</label>
                <input type="text" id="age" value="dummy">
            </div>
        </div>
    </div>

我正在尝试将div分配给变量，然后通过此句柄更改name和age的值。第一种警报方法确认它们已更改。但为什么content.html()仍然输出原始的html？如何让html()输出更新的数据？

Answer 1

使用attr()分配新值。

＆＃13;

$('#trigger').click(function () {
            var content = $(this).parent().find('.content');
            content.find('#name').attr("value", "Young man");
            content.find('#age').attr("value", "25");

            console.log(content.find('#name').val());
            console.log(content.html());
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
        <a id="trigger" href="#">Know!</a>
        <div class="content">
            <div>
                <label>Name:</label>
                <input type="text" id="name" value="dummy">
            </div>
            <div>
                <label>Age:</label>
                <input type="text" id="age" value="dummy">
            </div>
        </div>
    </div>

＆＃13;

Answer 2

jQuery .val()方法永远不会更新value属性。您可以使用.attr()方法更改它。

＆＃13;

$('#trigger').click(function() {
  var content = $(this).parent().find('.content');
  content.find('#name').attr("value", "Young man");
  content.find('#age').attr("value", "25");

  alert(content.find('#name').val());
  alert(content.html());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <a id="trigger" href="#">Know!</a>
  <div class="content">
    <div>
      <label>Name:</label>
      <input type="text" id="name" value="dummy">
    </div>
    <div>
      <label>Age:</label>
      <input type="text" id="age" value="dummy">
    </div>
  </div>
</div>

＆＃13;

jQuery val（）不更新.html（）中的值

2 个答案: