我允许用户添加多行字段,但我不想在第一行字段上包含删除链接,因此他们无法删除所有字段。
另外,如何将其限制为仅 3 行字段?
试试这个小提琴:小提琴
对于在第一行隐藏删除的第一部分,我在页面加载时调用了以下内容:
$(".removeoutcome").hide();
然后为了确保他们不能添加超过 3 个或删除最后一个,我在您的click
方法中添加了长度检查,请参阅:
$('.addoutcome').live('click', function() {
if ($(".outcomegroup").length < 3) {
$('#template').clone().removeAttr('id').insertAfter($(this).closest('.outcomegroup')).find('.minus').show();
renumber();
}
});
$('.removeoutcome').live('click', function() {
if ($(".outcomegroup").length > 1) {
$(this).closest('.outcomegroup').remove();
renumber()
}
});
另外,附带说明一下,live
现在已弃用,因此如果您使用的是 jQuery 1.7,请将这些方法更改为,on
或者如果您是 1.7 之前的版本,请使用delegate
.
您可以使用以下代码隐藏第一个元素的 del 并将其限制为仅添加 3 个集合
var count = 3;
$('.minus').first().hide();
$('.addoutcome').live('click', function() {
count--;
if(count < 0 )return;
$('#template').clone().removeAttr('id').insertAfter($(this).closest('.outcomegroup')).find('.minus').show();
});
更新:http: //jsfiddle.net/NzbRQ/5/
首先,放弃.live
。我添加了section
以提供比 更具体的选择器body
,但您可能可以在原始 DOM 中使用更好的选择器。
只是不要用一些简单的逻辑删除最后一行。您显示未来“del”链接的逻辑实际上已经存在!你甚至根本不需要最后一行删除逻辑,因为不显示“del”就足够了,但我只是彻底。
我不知道为什么有人没有密切关注这一行:
.find('.minus').show();
他肯定在哪里隐藏del
元素。简而言之,您唯一需要做的就是添加正确的 CSS 规则:
.minus { display: none; }
就是这样,第一个元素不会显示del
链接,其他元素会。
简单地限制为三个元素。
$("[parent element]").on('click', '.addoutcome', function() {
if($('.addoutcome').length > 2) return;
...
});
需要一个更好的选择器[parent selector]
,并且完全取决于您的布局。基本上,它是包装所有这些元素的元素,它们的父元素。