javascript - 为什么 'active' 类没有分配给内容列表项？

Question

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

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

有问题的部分是://单击事件:打开新选项卡

非常感谢大家的帮助。

(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

这就是你正在面对的臭名昭著的封闭世界。当您在标签上绑定(bind)事件时，变量 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);

fiddle :http://jsfiddle.net/B8e8W/1/