Question

我有一点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--;
});
});

Answer 1

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

这可以解决您的问题。

Answer 2

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

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

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

Answer 3

你想要的是循环学习剩余的学习目标（在删除一个/一些之后），和 - 重新编号 - 重新分配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++;
    })
}
});

jquery保持动态添加/删除元素的计数

3 个答案: