jquery - 如何使用引导程序管理输入标签
问题描述
add more btn
in输入是随机的jQuery
,我只想按顺序输入 ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,
电流输出:
我想要这个输出:
$(document).ready(function() {
var getText = function(opt) {};
var temp = $("#hidDays").val();
//Add More Groups
$("#main-wrapper").on("click", ".addGroupBtn", function() {
console.log("fsdfa");
var template = $("#timeGroupTemplate");
var btnTemplate = $("<div/>").append($("#btnTemplate").html());
var div = $("<div/>").append(template.html());
btnTemplate.find(".addGroupBtn").remove();
$("#periodDiv")
.find(".timePeriodDiv")
.find(".addRemBtn")
.html(btnTemplate.html());
$("#periodDiv")
.find(".timePeriodDiv")
.last()
.after(div.html());
});
//Remove More Groups
$("#main-wrapper").on("click", ".removeGroupBtn", function() {
var btnTemplate = $("<div/>").append($("#btnTemplate").html());
$(this)
.parents(".timePeriodDiv")
.remove();
var template = $(".timePeriodDiv").length;
if (template === 2) {
btnTemplate.find(".removeGroupBtn").remove();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div id="main-wrapper">
<div id="periodDiv">
<div class="form-group timePeriodDiv">
<div class="form-group-inside">
<div class="col-md-2">
<div class="input-group input-append bootstrap-timepicker">
<input type="file" class="form-control timepicker startTime add-on" name="startTime" value="">
</div>
</div>
</div>
<div class="col-md-2 addRemBtn">
<a class="btn btn-primary fa fa-minus removeGroupBtn" href="javascript:;"></a>
</div>
<div class="col-md-2 addRemBtn" style="margin-left: -230px;;">
<a class="btn btn-primary fa fa-plus addGroupBtn" href="javascript:;"></a>
</div>
</div>
</div>
<!---------------------->
<div class="hide" id="timeGroupTemplate">
<div class="form-group timePeriodDiv">
<div class="form-group-inside">
<label class="col-md-2 control-label"></label>
<div class="col-md-2">
<div class="input-group input-append bootstrap-timepicker">
<input type="file" class="form-control timepicker startTime add-on" name="startTime">
</div>
</div>
</div>
<div class="form-group-inside">
<label class="col-md-2 control-label"></label>
<div class="col-md-2">
<div class="input-group input-append bootstrap-timepicker">
<input type="file" class="form-control timepicker endTime add-on" name="endTime">
</div>
</div>
</div>
<div class="col-md-2 addRemBtn">
<a class="btn btn-primary fa fa-minus removeGroupBtn" href="javascript:;"></a>
<a class="btn btn-primary fa fa-plus addGroupBtn" href="javascript:;"></a>
</div>
</div>
</div>
<div id="btnTemplate" class="hide">
<a class="btn btn-primary fa fa-minus removeGroupBtn" href="javascript:;"></a>
<a class="btn btn-primary fa fa-plus addGroupBtn" href="javascript:;"></a>
</div>
</div>
解决方案
对您的代码进行一些更改可以实现这一点
$(document).ready(function() {
var template =`<div class="form-group-inside">
<div class="col-md-2">
<div class="input-group input-append bootstrap-timepicker">
<input type="file" class="form-control timepicker startTime add-on" name="startTime" value="">
</div>
</div>
<div class=" addRemBtn">
<a class="btn btn-primary fa fa-minus removeGroupBtn" href="javascript:;">-</a>
</div>
</div>`;
//Add More Groups
$("#main-wrapper").on("click", ".addGroupBtn", function() {
$(".form-grp").append(template);
});
//Remove More Groups
$("#main-wrapper").on("click", ".removeGroupBtn", function() {
$(this).parent().parent().remove();
});
$(".addGroupBtn").click();
});
.form-group-inside {
display:flex;
}
#main-wrapper {
display:flex;
align-items: flex-end;
}
.addRemBtn {
width:100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div id="main-wrapper">
<div class="form-grp">
</div>
<div class="addRemBtn">
<button class="btn btn-primary fa fa-plus addGroupBtn">+</button>
</div>
</div>
推荐阅读
- javascript - 控制工具栏大小的传单库或解决方法
- android - PopAsync 导致 ArgumentOutOfRangeException
- node.js - IBM watson 助手 Nodejs 中未授权的问题
- android - 您可以创建自定义视图吗?
- reactjs - 无法从 spring-boot 响应中获取 json 数据
- python - 比较 2 个 Json 文件并显示第二个文件的差异
- azure - 在 Azure 数据块中创建外部表
- elasticsearch - 如果 Elasticsearch 管道的条件与确切的字符串不匹配,则字符串比较
- excel - Vlookup 函数上的运行时错误“1004”应用程序定义或对象定义错误
- c# - iMobileDevice-Net event trigger when photo added or deleted