Question

我希望有表单字段，填充后单击按钮将更改html中span的内容。我尝试了以下内容，但是跨度内容没有被替换。

我写了以下html：

<form role="form">
    <div class="form-group">
        <label for="name">
            Name
        </label>
        <input type="text" class="form-control" id="nameValue" />
    </div>
    <button id="generate" type="submit" class="btn btn-default">
            Generate Story
    </button>
</form>

<p>The persons name is <span id="name"></span></p>

然后编写了以下jQuery：

<script>

$(function() {
  $("button").click( function()
       {
            $("#nameValue").keyup(function() {
                var val = $(this).val();
                $("#name").html(val);
            });
       }
  );
});

</script>

Answer 1

尝试分离keyup，click事件处理程序，如果button没有值，设置{{1，disabled true设为"#nameValue"在button事件

上{}} disabled到false

＆＃13;

keyup

＆＃13;

$(function() {
  var button = $("button"),
    val = "";
  $("#nameValue").keyup(function() {
    val = $(this).val();
    if (val.length > 0 && /\w+/.test(val)) button.prop("disabled", false)
  });
  button.click(function(e) {
    e.preventDefault();
    $("#name").html(val);
  });
});

＆＃13;

Answer 2

这将在按钮单击和键盘上改变跨度值

   <script>

    $(function() {
        $("button").click( function(){
            changeSpanValue($("#nameValue").val());
        });

        $("#nameValue").keyup(function() {
            changeSpanValue($(this).val());
        });
    });

    function changeSpanValue(val){
       $("#name").html(val);
    }

   </script>

使用jQuery将span内容替换为字段值

2 个答案: