问题描述
我创建代码以使用自定义样式添加新输入，但我需要更改 ID 号和“for”标记值 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>
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： ://jsfiddle.net/jennifergoncalves/7rLjf5b8/6/