为什么没有将“活动”类分配给内容列表项？

Question

下面是我为标签编写的插件。我确信有更好的方法来编写这个，但是当我开始完善这个插件时会出现。这是一个正在进行中的个人项目。问题是当我单击其中一个选项卡时，没有将“活动”类分配给相应的内容 li 标签。我正在使用 for 循环将 id 分配给每个 li。

如果我从将“活动”类分配给正确 li 标签的循环中删除 (cEvent + 1)，那么它将为所有 li 标签分配一个“活动”类 - 因此我知道选择器是正确的。当我在循环中添加(cEvent + 1) 时，它不会分配任何东西。

有问题的部分是：// Click Event: Open New Tab

非常感谢大家的帮助。

(function(){
$.fn.sctabs = function(options){
    var defaults = {
        tabsTheme       : 'default',
        tabsOrientation : 'horizontal', // horizontal, vertical
        tabsClassName   : 'tab',
        contentClassName: 'tabcontent',
        activeClass     : 'active',
        initActiveItem  : ':first-child',
        tabsEffOpen     : 'slideDown',
        tabsEffClose    : 'slideUp'
    };

    var options = $.extend(defaults,options);

    console.log('Tabs Plugin Successfully Loaded');

    // Add Theme
    $(this).addClass(options.tabsTheme);

    // Set Tabs Orientation
    $(this).addClass(options.tabsOrientation);

    // Add Initial Classes
    $('ul.popuptabslist li').addClass(options.tabsClassName);
    $('ul.popuptabsoutput li').addClass(options.contentClassName);

    // Assign Tabs/Content to Var
    var tabsList = $('ul.popuptabslist li');
    var contentsList = $('ul.popuptabsoutput li');

    // Set the stopping point dynamically
    tabsLength = tabsList.length;
    contentsLength = contentsList.length;

    // Tabs Loop: Start the index at 0
    t = 0;
    for (; t < tabsLength; t++) {
        tabsList[t].id = "tab" + (t + 1);

        console.log('Tab id' + (t + 1) + ' Created');
    }

    // Contents Loop: Start the index at 0
    c = 0;
    for (; c < contentsLength; c++) {
        contentsList[c].id = "content" + (c + 1);

        console.log('Tab Content id' + (c + 1) + ' Created');
    }

    // Set Initial Item Open
    $('ul.popuptabslist ' + options.initActiveItem + ', ul.popuptabsoutput ' + options.initActiveItem)
        .addClass(options.activeClass);

    // Click Event: Open New Tab
    cEvent = 0;
    for (; cEvent < tabsLength; cEvent++){
        $('ul.popuptabslist li#tab' + (cEvent + 1)).on('click', function(){

            // Remove Active Class on Click
            $('ul.popuptabslist li.tab').removeClass(options.activeClass);
            $(this).parent().parent().find('ul.popuptabsoutput li.tabcontent').removeClass(options.activeClass);

            // Add Active Class to Clicked Tab and Corresponding Content
            $(this).addClass(options.activeClass);
            $('ul.popuptabsoutput li#content' + (cEvent + 1)).addClass(options.activeClass);
            $(this).parent().parent().find('ul.popuptabsoutput li#content' + (cEvent + 1)).addClass(options.activeClass);

            console.log($(this).attr('id').toUpperCase() + ' clicked');
        });
    }

};
})(jQuery);

Answer 1

这就是你正在处理的臭名昭著的封闭世界。当您在标签上绑定事件时，变量cEvent 会递增，这意味着每个事件的最后一个cEvent 实例将是id。

您可以使用自动关闭功能：

(function(cEvent){
            $('ul.popuptabslist li#tab' + (cEvent + 1)).on('click', function(){

                // Remove Active Class on Click
                $('ul.popuptabslist li.tab').removeClass(options.activeClass);
                $(this).parent().parent().find('ul.popuptabsoutput li.tabcontent').removeClass(options.activeClass);

                // Add Active Class to Clicked Tab and Corresponding Content
                $(this).addClass(options.activeClass);
                $('ul.popuptabsoutput li#content' + (cEvent + 1)).addClass(options.activeClass);
                $(this).parent().parent().find('ul.popuptabsoutput li#content' + (cEvent + 1)).addClass(options.activeClass);

                console.log($(this).attr('id').toUpperCase() + ' clicked');
            });
        })(cEvent);

小提琴：http://jsfiddle.net/B8e8W/1/