javascript - JQueryステートメントの二重ループ

Question

私のウェブサイトには次のJqueryコードがあります。

    $("#nav-tabs").on("click", "a", function(e) {
            e.preventDefault();
            $(this).tab('show');
        });

        var counter = 1;

        $('.plus').click(function(e) {

            if(counter <= 3){
            $('#nav-tabs').append('<a href="#tab' +</button></a></li>');
            } else { alert("Only 3 Tabs Allowed!")};

            $('.tab-content').append('<div class="tab-pane" id="tab' + counter + '"></div>');
            if (counter <= 3) {
                counter++;
            } else {};


        $('.close').click(function(e) {

            var panelId = $(this).closest("li").remove().attr("aria-controls");
            $("#tab" + panelId).remove();
            if(counter < 1){
                counter = 1
                }else if (counter >= 1) {
                    counter--;
                } else if (counter == 0) {
                    counter = 1
                };

        })

    });

私の質問は、関数に1回入るのではなく、.closeをクリックすると、再び繰り返されてカウンターが減少します...

Answer 1

実際にクリックイベントをバインドして、閉じる/開くがクリックされたことを識別します。これをやってみてください。

$(document).ready(function(){

var counter = 1;

$("#nav-tabs").on("click", "a", function() {
    var item = $(this); // the anchor tag which was clicked

    item.tab('show');

    if( item.hasClass("open") ) { // checks if the clicked anchor tag has class "open"

        if(counter <= 3)
            $('#nav-tabs').append('<a href="#tab">Button</a></li>');
        else
            alert("Only 3 Tabs Allowed!");

        $('.tab-content').append('<div class="tab-pane" id="tab' + counter + '"></div>');

        if (counter <= 3)
            counter++;
    }

    else if( item.hasClass("close") ) { // checks if the clicked anchor tag has class "close"
        var panelId = $(this).closest("li").remove().attr("aria-controls");

        $("#tab" + panelId).remove();

        if(counter < 1)
           counter = 1
        else if (counter >= 1)
            counter--;
        else if (counter == 0) {
            counter = 1
    }

    return false; //this will prevent default behavior
});

});