Question

我此时创建了一个表单，该表单应该在jQuery var中获取用户名，并将其添加到我所做的步骤中。

以下是我收集＆＃34;用户名＆＃34;的表单和输入的步骤：

<div class="stepwizard row col-md-12">

  <div class="stepwizard-row setup-panel">

    <div class="stepwizard-step">
      <a href="#step-1" class="btn btn-primary"><i class="fas fa-user"></i> Hey there!</a>
    </div>

    <div class="stepwizard-step">
      <a href="#step-2" class="btn btn-default" disabled="disabled"><i class="fas fa-user"></i> Information</a>
    </div>

    <div class="stepwizard-step">
      <a href="#step-3" class="btn btn-default" disabled="disabled"><i class="fas fa-store"></i> Store</a>
    </div>

    <div class="stepwizard-step">
      <a href="#step-4" class="btn btn-default" disabled="disabled"><i class="fas fa-bicycle"></i> Bicycle</a>
    </div>

    <div class="stepwizard-step">
      <a href="#step-5" class="btn btn-default" disabled="disabled"><i class="fas fa-user-shield"></i> Insurance</a>
    </div>

    <div class="stepwizard-step">
      <a href="#step-6" class="btn btn-default" disabled="disabled"><i class="fas fa-user-shield"></i> Shipment</a>
    </div>

  </div>

</div>

<div class="form-group col-md-6">
  <label class="control-label">First Name</label>
  <input maxlength="100" id="userfirstname" required="required" class="form-control" placeholder="Enter First Name" type="text">
</div>

这是我的jQuery从我的输入文本域收集数据：

$(document).ready(function () {
    var userfirstname= $('#userfirstname').val();
});

如何将变量的字符串放在HTML中：

<div class="stepwizard-step">
    <a href="#step-2" class="btn btn-default" disabled="disabled">
    <i class="fas fa-user"></i> "here place the var" Information</a>
</div>

Answer 1

<div class="stepwizard-step">
        <a href="#step-2" class="btn btn-default" disabled="disabled"><i class="fas fa-user"></i> <div id="user"></div> Information</a>
</div>

<script>
    $("#user").html(userfirstname);
</script>

Answer 2

当然，你总是可以使用jQuery的选择工具。在这里，您可以通过它的href值选择您的链接：$("a[href$='#step-6']")。

然后使用.text()方法更改内容：

const element = $("a[href$='#step-6']");
element.text('some text' + element.text())

或者在你的情况下：

const element = $("a[href$='#step-6']");
element.text(userfirstname + element.text()) // assuming userfirstname is set

以下是演示代码：

const element = $("a[href$='#step-6']");

element.text('some text' + element.text())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stepwizard row col-md-12">

  <div class="stepwizard-row setup-panel">

    <div class="stepwizard-step">
      <a href="#step-1" class="btn btn-primary"><i class="fas fa-user"></i> Hey there!</a>
    </div>

    <div class="stepwizard-step">
      <a href="#step-2" class="btn btn-default" disabled="disabled"><i class="fas fa-user"></i> Information</a>
    </div>

    <div class="stepwizard-step">
      <a href="#step-3" class="btn btn-default" disabled="disabled"><i class="fas fa-store"></i> Store</a>
    </div>

    <div class="stepwizard-step">
      <a href="#step-4" class="btn btn-default" disabled="disabled"><i class="fas fa-bicycle"></i> Bicycle</a>
    </div>

    <div class="stepwizard-step">
      <a href="#step-5" class="btn btn-default" disabled="disabled"><i class="fas fa-user-shield"></i> Insurance</a>
    </div>

    <div class="stepwizard-step">
      <a href="#step-6" class="btn btn-default" disabled="disabled"><i class="fas fa-user-shield"></i> Shipment</a>
    </div>

  </div>

</div>


<div class="form-group col-md-6">
  <label class="control-label">First Name</label>
  <input maxlength="100" id="userfirstname" required="required" class="form-control" placeholder="Enter First Name" type="text">
</div>

将jQuery var放入<a> </a>

2 个答案: