从技术上讲,粘贴在下面的代码在某种意义上是有效的,就像我编写的 jquery 代码在单击时有效一样。 (不是 js/jquery 的人)
这是一个 jsfiddle:http://jsfiddle.net/t2t1mxqd/
但是,问题在于这是 paypal 的东西,如果您注意到每个输入(隐藏和未隐藏)都有编号。
<div class="removal">
<input type="hidden" name="item_name_1" value="Program 1">Program 1
<input class="removal" type="text" name="amount_1" value="10.00">
<button type="button">Remove</button>
</div>
比如以第一个为例:隐藏行有item_name_1
,非隐藏行有amount_1
。
如果它是自下而上删除的,这不是问题,即数字保持从上到下的顺序编号。
如果它们是随机删除或自上而下删除,这是一个问题。
那么数字显然不是从item_name_1
等开始的
我如何重写代码,当一个人选择说,删除程序 5 时,item_name_n
和 name_n
的其余属性按顺序重写,还是仍然有效?
有什么建议吗?
谢谢。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".removal").click(function() {
$(this).remove();
});
});
</script>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr"
method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="kin@kinskards.com">
<!-- Specify an Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<!-- Specify details about the item that buyers will purchase. -->
<input type="hidden" name="item_name"
value="Donations to Programs">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="no_shipping" value="2">
<div class="removal">
<input type="hidden" name="item_name_1" value="Program 1">Program 1
<input class="removal" type="text" name="amount_1" value="10.00">
<button type="button">Remove</button>
</div>
<br /><br />
<div class="removal">
<input type="hidden" name="item_name_2" value="Program 2">Program 2
<input type="text" name="amount_2" value="10.00">
<button type="button">Remove</button>
</div>
<br /><br />
<div class="removal">
<input type="hidden" name="item_name_3" value="Program 3">Program 3
<input type="text" name="amount_3" value="10.00">
<button type="button">Remove</button>
</div>
<br /><br />
<div class="removal">
<input type="hidden" name="item_name_4" value="Program 4">Program 4
<input type="text" name="amount_4" value="10.00">
<button type="button">Remove</button>
</div>
<br /><br />
<div class="removal">
<input type="hidden" name="item_name_5" value="Program 5">Program 5
<input type="text" name="amount_5" value="10.00">
<button type="button">Remove</button>
</div>
<br /><br />
<div class="removal">
<input type="hidden" name="item_name_6" value="Program 6">Program 6
<input type="text" name="amount_6" value="10.00">
<button type="button">Remove</button>
</div>
<br /><br />
<div class="removal">
<input type="hidden" name="item_name_7" value="Program 7">Program 7
<input type="text" name="amount_7" value="10.00">
<button type="button">Remove</button>
</div>
<br /><br />
<div class="removal">
<input type="hidden" name="item_name_8" value="Program 8">Program 8
<input type="text" name="amount_8" value="10.00">
<button type="button">Remove</button>
</div>
<br /><br />
<div class="removal">
<input type="hidden" name="item_name_9" value="Program 9">Program 9
<input type="text" name="amount_9" value="10.00">
<button type="button">Remove</button>
</div>
<br /><br />
<div class="removal">
<input type="hidden" name="item_name_10" value="Program 10">Program 10
<input type="text" name="amount_10" value="10.00">
<button type="button">Remove</button>
</div>
<br /><br />
<div class="removal">
<input type="hidden" name="item_name_11" value="Program 11">Program 11
<input type="text" name="amount_11" value="10.00">
<button type="button">Remove</button>
</div>
<br /><br />
<!-- Display the payment button. -->
<input type="image" name="submit" border="0"
src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif"
alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1"
src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" >
</form>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr"
method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="kin@kinskards.com">
<!-- Specify a PayPal Shopping Cart View Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="display" value="1">
<br /><br />
<!-- Display the View Cart button. -->
<input type="image" name="submit" border="0"
src="https://www.paypalobjects.com/en_US/i/btn/btn_viewcart_LG.gif"
alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1"
src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" >
</form>
最佳答案
这将使 input
名称保持顺序,而不影响任何其他内容,我认为这是您的目标:
$('.removal button').click(function() {
$(this).parent().remove();
$('.removal [type="hidden"]').each(function(idx) {
$(this).attr('name', 'item_name_'+(idx+1));
});
$('.removal [type="text"]').each(function(idx) {
$(this).attr('name', 'amount_'+(idx+1));
});
});
您还可以通过删除以下代码来稍微清理一下代码:
<br /><br />
... 并为 removal
类添加底部边距:
.removal {
margin-bottom: 1em;
}
这样,您在删除行时就不会以空格结束。
关于jquery - 删除文本框后,如何重新编号其余文本框的名称属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33179416/