2

ボタンが押されたときに「div」を生成するjQueryが少しあります。1 ページあたり 10 個の「div」の制限があります。カウンターは機能しますが、カウンターを削除すると、思い通りに機能しません。1つを削除して追加を続けると、最後の番号が複製されます。

たとえば、6 つの「div」を作成し、#4 を削除して 5 つの div を残した場合、別の div を追加すると、再び 6 つの div が作成されますが、6 というラベルの付いた 2 つの「div」が作成されます。

カウンターを管理するより良い方法はありますか?

$(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

これは、(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 に答える