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

Question

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

这是我收集“用户名”的表单和输入的步骤：

<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>