JQuery-删除html元素时重新格式化数字顺序
JQuery - Reformat number order when html element is removed
我目前正在尝试获得一个基本的功能,我说它有5行,每个行都有自己的编号。
所以我有5排。。。。。。。5,4,3,2,1<---如果我去掉3,它应该看起来像4,3,2,1,因此有效地反映了我现在只有4,而不是5……如果我去掉另一个值,它就会变成3,2,1等等。
我已经有点接近了,但无法完全发挥作用。
这是JSfiddle
jQuery(function($) {
var countercontact = 0;
var counternum = 0;
$("#addcontact").on('click', function() {
countercontact++;
$("#contact_num").append('<div class="row"><div class="form-group col-xs-1 contactspan"><span class="countercontact">' + countercontact + '.</span></div><div class="form-group col-xs-3"><input type="text" class="form-control" id="pass" placeholder="No number"></div><div class="form-group col-xs-2"><select class="form-control" id="delay"><option>5</option><option>10</option><option>20</option><option>30</option><option>40</option><option>50</option><option>60</option></select></div><div class="form-group col-xs-2">'<input type="checkbox" class="form-control" id="confirm"></div><div class="form-group col-xs-2"><input type="checkbox" class="form-control" id="enable"></div><div class="form-group col-xs-2"><button type="submit" class="btn btn-primary form-control deletecontact">Delete</button></div></div>');
if (countercontact === 1) {
$(".deletecontact").addClass('disabled');
} else {
$(".deletecontact").removeClass('disabled');
}
});
$("#contact_num").on("click", ".deletecontact", function() {
if (countercontact <= 1) {
$(".deletecontact").addClass('disabled');
} else {
$(".deletecontact").removeClass('disabled');
$(this).closest('.row').remove();
countercontact--;
$(".contactspan").each(function(index) {
var ordernum = $(this).text();
console.log(ordernum);
if (ordernum !== 1) {
$(this).text(parseInt($(this).text()) - 1);
}
});
}
});
});
.container {
width: 75%;
}
.row {
margin-bottom: 12px;
font-size: 13px;
}
.panel {
border: none;
box-shadow: none;
}
.panel-heading {
background-color: #D9DBDE;
padding: 20px;
margin-bottom: 10px;
border-radius: 0;
}
.panel-heading.head {
padding: 20px 0;
background-color: #E1F2F9;
}
.panel-body {
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel panel-default">
<div class="panel-body row">
<div class="form-group" id="contact_num">
<div class="row">
<div class="form-group col-md-1">
<label for="pass"></label>
</div>
<div class="form-group col-md-3">
<label for="pass">Contact No(s)</label>
</div>
<div class="form-group col-md-2">
<label for="delay">Delay</label>
</div>
<div class="form-group col-md-2">
<label for="confirm">Confirm</label>
</div>
<div class="form-group col-md-2">
<label for="enable">Enable</label>
</div>
<div class="form-group col-md-2">
<label for="delete"></label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" id="addcontact" style="margin-bottom: 10px;">Add</button>
</div>
</div>
您可以编写一个函数来更正数字,并在需要时运行,比如删除项目后。
function correctIndex(){
$('#contact_num .row').each(function(){
$(this).find('.contactspan').html($(this).index()+1);
});
}
或者你只需更改代码的这一部分:
$(".contactspan").each(function(index) {
var ordernum = $(this).text();
console.log(ordernum);
if (ordernum !== 1) {
$(this).text(parseInt($(this).text()) - 1);
}
});
至:
$(".contactspan").each(function(){
$(this).html($(this).closest('.row').index() + '.')
});
这里是更新的fiddle
请检查下面的代码段。我对号码的重新分配做了如下更改。
var ordernum = 1;
$(".contactspan").each(function(index) {
$(this).text(ordernum);
ordernum++;
});
首先将订单号指定为1,然后逐渐增加行数。
jQuery(function($) {
var countercontact = 0;
var counternum = 0;
$("#addcontact").on('click', function() {
countercontact++;
$("#contact_num").append('<div class="row"><div class="form-group col-xs-1 contactspan"><span class="countercontact">' + countercontact + '.</span></div><div class="form-group col-xs-3"><input type="text" class="form-control" id="pass" placeholder="No number"></div><div class="form-group col-xs-2"><select class="form-control" id="delay"><option>5</option><option>10</option><option>20</option><option>30</option><option>40</option><option>50</option><option>60</option></select></div><div class="form-group col-xs-2">'<input type="checkbox" class="form-control" id="confirm"></div><div class="form-group col-xs-2"><input type="checkbox" class="form-control" id="enable"></div><div class="form-group col-xs-2"><button type="submit" class="btn btn-primary form-control deletecontact">Delete</button></div></div>');
if (countercontact === 1) {
$(".deletecontact").addClass('disabled');
} else {
$(".deletecontact").removeClass('disabled');
}
});
$("#contact_num").on("click", ".deletecontact", function() {
if (countercontact <= 1) {
$(".deletecontact").addClass('disabled');
} else {
$(".deletecontact").removeClass('disabled');
$(this).closest('.row').remove();
countercontact--;
var ordernum = 1;
$(".contactspan").each(function(index) {
$(this).text(ordernum);
ordernum++;
});
}
});
});
.container {
width: 75%;
}
.row {
margin-bottom: 12px;
font-size: 13px;
}
.panel {
border: none;
box-shadow: none;
}
.panel-heading {
background-color: #D9DBDE;
padding: 20px;
margin-bottom: 10px;
border-radius: 0;
}
.panel-heading.head {
padding: 20px 0;
background-color: #E1F2F9;
}
.panel-body {
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel panel-default">
<div class="panel-body row">
<div class="form-group" id="contact_num">
<div class="row">
<div class="form-group col-md-1">
<label for="pass"></label>
</div>
<div class="form-group col-md-3">
<label for="pass">Contact No(s)</label>
</div>
<div class="form-group col-md-2">
<label for="delay">Delay</label>
</div>
<div class="form-group col-md-2">
<label for="confirm">Confirm</label>
</div>
<div class="form-group col-md-2">
<label for="enable">Enable</label>
</div>
<div class="form-group col-md-2">
<label for="delete"></label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" id="addcontact" style="margin-bottom: 10px;">Add</button>
</div>
</div>
以下是导致该行为的原因:
var ordernum = $(this).text();
console.log(ordernum);
if (ordernum !== 1) {
$(this).text(parseInt($(this).text()) - 1);
}
在本例中,ordernum
是1.
,因此必须像在if子句中那样将其转换为int。
var ordernum = parseInt($(this).text());
console.log(ordernum);
if (ordernum !== 1) {
$(this).text(ordernum - 1);
}
请参阅https://jsfiddle.net/YvCil/ajgm9rhw/1/
相关文章:
- 使用纯javascript格式化数字
- 用javascript格式化数字,而不进行更改
- Java脚本插件,用于将数字转换为特定于区域性的货币格式,并将具有特定货币格式的非格式化数字转换为普通数字
- jQuery(或Javascript)基于给定的C#/VBA/Java格式字符串格式化数字的方法
- 格式化数字,如22,55,86,21,28
- Javascript-格式化数字,始终显示原始的小数位数
- 使用 javascript 格式化数字
- Chrome告诉“Invaild Group”使用正则表达式来格式化数字
- 在 javascript 中用指数格式化数字
- 使用 jquery 编号格式化程序格式化数字并重新格式化它们
- Javascript - 用正则表达式替换字符串以格式化数字
- 如何使用 jQuery 格式化数字
- 剑道在网格中格式化数字
- 在谷歌脚本中格式化数字
- Javascript 用逗号和点格式化数字
- 如何以特定方式格式化数字
- 在 JavaScript 中格式化数字
- 在Dojo中格式化数字
- 通过ExtJS或javascript格式化数字
- 用撇号作为千位分隔符格式化数字