Question

我创建代码以添加具有自定义样式的新输入，但是我需要更改ID号和“用于”标记值OnClick。

我需要添加id =“ input-2”和for =“ input-2” 在单击上，我需要添加id =“ input-3”和for =“ input-3”

的新html。

此代码：

var maxSocial = 10,
    socialWrapper = $("#socialWrapper"),
    addSocial = $("#add-social"),
    socialX = 1;

$(addSocial).click(function (e) {
    e.preventDefault();
    if (socialX < maxSocial) {
        socialX++;
        $(socialWrapper).append('<div class="inputbox"><div class= "inputbox-content"><input id="input-1" type="text" required /><label for="input-1">Social Link</label><span class="underline"></span></div></div>');
    }
});

$(socialWrapper).on("click", ".remove-social", function (e) {
    e.preventDefault();
    $(this).parent('div').remove(); socialX--;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="socialWrapper">
  <div class="inputbox">
    <div class="inputbox-content">
      <input id="input-1" type="text" required />
      <label for="input-1">Social Link</label>
      <span class="underline"></span>
    </div>
  </div>
</div>
<div class="social-add">
  <a href id="add-social"><i class="fas fa-plus"></i> Add Social</a>
</div>

Answer 1

您要基于通用字符串“ input-”创建id并附加socialX。

$(addSocial).click(function (e) {
    e.preventDefault();
    if (socialX < maxSocial) {
        socialX++;
        var thisId = "input-" + socialX;
        $(socialWrapper).append('<div class="inputbox"><div class= "inputbox-content"><input id="' + thisId + '" type="text" required /><label for="' + thisId + '">Social Link</label><span class="underline"></span></div></div>');
    }
});

工作中的JSFiddle：https://jsfiddle.net/jennifergoncalves/7rLjf5b8/6/

通过jQuery添加具有+1 ID的HTML OnClick

1 个答案: