javascript - OOJS - 将每个元素绑定(bind)到特定点击

Question

我正在慢慢尝试通过构建 Accordion 切换来学习 OOJS，但我遇到了困难。

编辑:慢慢地到达那里。我已经让开关按照我想要的方式运行了。不幸的是，我错误地调用了添加/删除类(？)。

我目前这样调用它:

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

我宁愿通过 EVENTS.OPEN 和 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

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

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

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