我正在研究jQuery中的“添加更多”功能,其中用户单击“ +”符号,然后将添加额外的div元素组以及每个div的编号,假设用户必须添加多个“ companies” ,点击添加更多按钮company2,company3,company4等。通常,在单击“ +”添加更多公司后,用户还单击“-”符号以删除相应的公司。我的问题是,如果用户删除5个公司增加了5个公司,那么该公司号需要根据当前的公司总数进行更新;如果删除3个公司,则订单号应为1,2,3,4。
//Add Company Script:
var cn=$("#experience_latest_value").val();
$(".add_experience").click(function(){
var new_experience = '<div class="col-md-12"><div class="col-md-6">
<div class="form-group"><label class="col-sm-4 control-label">Company:</label>
<div class="col-sm-8"><input type="text" name="company[]" id="company">
</div></div></div>';
var new_experience1 = '<div class="row"><a class="pull-right remove_experience btn btn-danger" ><i class="glyphicon glyphicon-remove"></i></a><div class="col-md-12"><h3>Company '+cn+': </h3></div>'+new_experience+'</div>';
$("#experience_latest_value").val(++cn);
$(".append_experience").append(new_experience1);
//Remove Company Script:
$('.append_experience').on('click', '.remove_experience', function() {
$(this).parent().remove();
var cnum = 2;
$('.remove_experience.col-md-12>h3').each(function() {
$(this).val(cnum);
cnum++;
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="panel-title"><input type="checkbox" name="experience_check" id="experience_check" checked="checked" class="check_cls all_experiences" value="on">
<label for="experience_check" class="checkc"></label>
Experience:
<a class="pull-right add_experience btn btn-success">
<i class="glyphicon glyphicon-plus"></i>
</a>
</h2>
<div class="tab-pane active" role="tabpanel" id="step2">
<div class="append_experience">
<div class="col-md-12">
<h3>
<input type="checkbox" name="individual_experience[]" id="individual_experience71" class="check_cls individual_experience" checked>
<label for="individual_experience71" class="checkc"></label>
Company 1:
</h3>
</div>
<input type="hidden" name="experience_latest_value" id="experience_latest_value" value="">
<!-- START: This script added dynamically after click on '+' -->
<div class="row">
<a class="pull-right remove_experience btn btn-danger" data-cnumber="3">
<i class="glyphicon glyphicon-remove"></i>
</a>
<div class="col-md-12">
<h3>Company 2: </h3>
</div>
<div class="col-md-12"></div>
</div>
<!-- END: This script added dynamically after click on '+' -->
</div> <!-- append_experience -->
</div>
所有额外添加的公司将具有“ remove_experience”类,第一家公司则没有“ remove_experience”类。我的代码有什么问题。任何人请协助。谢谢。
答案 0 :(得分:0)
请尝试
$('.append_experience').on('click','.remove_experience',function() {
$(this).parent().remove();
var cnum = 2;
$('.remove_experience.col-md-12>h3').each(function(){
$(this).html(cnum);
cnum++;
});
});