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
                };

        })

    });

我的问题是，一旦我单击 .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
});

});