Question

我不完全理解javascript如何在OOP模型中工作，所以我为智慧堆叠溢出。

我的示例代码：

(function($) {
var $container = $('#container');
var $sidebar = $('#sidebar');


// Sidebar  
var currTab = $('#s1');

if(currTab) {
    currTab.parent().parent().parent().addClass('selectedTop');
    currTab.find(".sideContent").delay(300).slideToggle("slow");
    currTab.addClass('selected');
}

$('#sideTop').delegate('li', 'hover', function(event) {
    var $this = $(this);
    if (event.type == 'mouseenter') {
        if(!$this.hasClass("selected")){
            $this.siblings(".selected").children(".sideContent").toggle();
            $this.siblings(".selected").removeClass('selected');
            $this.find(".sideContent").toggle().addClass('selected');
            $this.addClass('selected');
        }
    }
});


})(this.jQuery);

此代码缓存我的容器和侧边栏div并控制我的侧边栏上的标签悬停。这些将在每个页面上，所以我最初只是在每个页面上包含js文件，它像往常一样工作。现在我已经到了一个点，我想自定义每个页面，默认情况下打开侧边栏的特定选项卡（由 currTab 变量定义）。设置后，它将默认打开，并在鼠标离开侧边栏后保持打开状态。

我还没有找到一种在每个页面上自定义currTab的方法，而无需完全重新粘贴与侧边栏关联的所有代码，使得对脚本的任何更新都很麻烦。

我该如何接近这个？感谢

Answer 1

我很遗憾因为缺乏理解而导致混淆，但related questions中的一位以我不知道如何搜索的方式回答了我的问题：

他先设置一个“类”，可以作为单独的JS包含，然后使用 jQuery.ClassName（options）

进行通信

我已经尝试了它并且它完美地工作，分离一致的代码，每个页面上的值都会改变。

(function($){
var undefined;

$.ClassName = function(options){
    var self = this;
    var cfg = $.extend(true, {}, this.defaults, options);

    // ********************
    // start:private
    // ********************
    function _init(){

    };

    // ********************
    // start:public
    // ********************
    this.methodName = function(){

    };

    _init();
};

$.ClassName.prototype.defaults = {};
})(jQuery);

Answer 2

上课。只需将“currTab”等类添加到活动的任何选项卡中即可。在JS中，在选项卡上检查该类，并在更改选项卡时，从旧类中删除该类并将其添加到新类中。

Answer 3

默认情况下，您要为要激活的项添加一个类。使用JS来检测类并做出相应的反应。

Answer 4

一种方法是，在每个HTML页面内以不同方式声明currTab，并删除“var currTab = $（'＃s1'）;”来自您的JavaScript文件。 JavaScript文件中其余的currTab出现仍然能够引用它。

我应该如何跨多个页面共享Javascript函数？

4 个答案: