Question

我慢慢地试图通过构建手风琴切换来学习OOJS，并且我很难过。

编辑：慢慢地到达那里。我已经按照我想要的方式进行了切换功能。不幸的是，我没有错误地调用添加/删除类（？）。

我目前称之为：

accordion.ELEMENTS.TRIGGER.click(function() {
 if ($(this).parent().hasClass(accordion.CLASSES.OPEN)){
  $(this).parent().removeClass('open')
 }
 else {
  $(this).parent().addClass('open');
 }
});

我宁愿通过EVENTS.OPEN＆amp; EVENTS.CLOSE或者甚至将这两个都放入EVENTS.BIND并让BIND排除是否打开：

Here's a JSFiddle, I'm trying to bind the EVENTS.OPEN and EVENTS.CLOSE instead of trying to find the parents.

var accordion = { 
    ELEMENTS: {
        HOME:        $('.js-accordion-toggle'),
        TRIGGER:     $('.js-accordion-trigger'),
        PANEL:       $('.js-accordion-panel')
    },

    CLASSES: {
        OPEN: 'open'
    },

    EVENTS: {                   
        OPEN: function() {
            if (ELEMENTS.HOME.hasClass(accordion.CLASSES.OPEN)) {
                console.log(this + "open");
                ELEMENTS.HOME.addClass(accordion.CLASSES.OPEN);
            }
            else {
                console.log("this should close");
                this.close();
            }
        },

        CLOSE: function() {
           accordion.ELEMENTS.HOME.removeClass(accordion.CLASSES.OPEN);
        },

        //BIND: function() {
        //    accordion.ELEMENTS.HOME.each(function() {
        //        accordion.EVENTS.OPEN();
        //    });
        //}
    },
    fn: {
        attachEvents: function() {
            accordion.ELEMENTS.TRIGGER.click(function() {
               console.log(this);
                if ($(this).parent().hasClass(accordion.CLASSES.OPEN)){
                    $(this).parent().removeClass('open')
                }
                else {
                    $(this).parent().addClass('open');
                }
            });                 
        }
    },

    init: function() {

        accordion.fn.attachEvents();
    }        
}


accordion.init();

Answer 1

我设法通过在对象定义后调用accordion.init()来使原始fiddle工作。我还必须用accordion.ELEMENTS.PANEL.addClass(accordion.CLASSES.OPEN);替换第37行，以消除一些undefined object错误。

对于您的新codes，您可以通过jQuery.toggleClass删除第19行和第22行中的if..else语句来简化您的代码，使其看起来像：

$(this).closest(toggleHome).toggleClass(toggleClass);

OOJS - 将每个元素绑定到特定的点击

1 个答案: