2

我有一点 jQuery，当按下按钮时会生成一个“div”。每页有 10 个“div”的限制。计数器可以工作，但是当我删除一个时，它并没有按照我想要的方式工作。当一个被删除并且我继续添加时，它会复制最后一个数字。

例如，如果我创建 6 个“div”并删除 #4 留下 5 个 div，然后我添加另一个 div，我将再次拥有 6 个 div，但我将有 2 个“div”标记为 6。

有没有更好的方法来管理柜台？

$(document).on('ready', function () {
$("#objectivesGroup").sortable();
var counter = 1;

$("#btnAddObjective").on("click" ,function () {
    if(counter>10){
        alert("Only 10 learning objectives allowed per page.");
        return false;
    }   

    var newTextBoxDiv = $(document.createElement('tr')).attr("id", 'objective' + counter);
    newTextBoxDiv.after().html(
        "<div>test</div><input type='button' value='delete'>");
    counter++;
});

$('body').on('click', '.removeObjective', function () {
    $(this).parent().remove();
    counter--;
});
});
4

3 回答 3

4

创建一个未使用号码的队列。
从 [1,2,3,4,5,6,7,8,9,10] 开始
创建新项目时，检查队列中是否还有值，如果有，将其弹出并使用它。如果您删除了一个项目，请将它的值重新添加到队列中。

这应该可以解决您的问题。

于 2013-05-01T16:55:44.853 回答
1

您可以使用 jQuery 仅“计算”与您的类匹配的元素的当前数量，而不是维护计数器变量。

var currentNumberOfDiv = $('.removeObjective').length;

注意：这仅适用于您实际上不需要添加元素的唯一 ID 值的情况。

于 2013-05-01T17:01:49.897 回答
1

这你想要的是循环剩余的学习目标（在删除一个/一些之后），并且 - 重新编号 - 重新分配 ID - 以正确的数字获取计数

以下代码执行上述操作

$(document).on('ready', function () {
var counter = 1;

$("#btnAddObjective").on("click" ,function () {
    if(counter>10){
        alert("Only 10 learning objectives allowed per page.");
        return false;
    }
    $(this).parent().append("<div id='objective'"+counter+"'>"+counter+"<input type='button' value='delete' class='removeObjective'></div>");
    counter++;
});

$('body').on('click', '.removeObjective', function () {
    $(this).parent().remove();
    counter--;
    resetStuff();
})

function resetStuff() {
    counter = 1;
    $(".removeObjective").each(function() {
        $(this).parent().attr('id','objective'+counter);
        $(this).parent().text(counter).append('<input type="button" value="delete" class="removeObjective">');
        counter++;
    })
}
});
于 2013-05-01T17:14:14.603 回答