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

我正在慢慢尝试通过建立手风琴切换学习OOJS，并且我很难过。OOJS - 将每个元素绑定到一个特定的点击

编辑：慢慢到达那里。我有切换功能，我想如何。不幸的是我不正确地调用add/remove类（？）。

我目前正在调用它想：

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();

来源

2014-11-03 Mathias Rechtzigel

我觉得你非常接近。如果我正确理解你的代码，你不需要调用'accordion.init（）'来触发事件绑定吗？然后我必须用'accordion.ELEMENTS.PANEL.addClass（accordion.CLASSES.OPEN）'替换你的第37行;'使点击事件绑定起作用。 – 2014-11-03 19:25:39

@isim我放弃了EVENTS.OPEN和EVENTS.CLOSE，它似乎正在工作。不是最有说服力的，但我猜它可以解决=/http://jsfiddle.net/MathiasaurusRex/Ln85bfn5/180/ – 2014-11-03 23:41:21

我个人喜欢单一的概念，像切换（就像你做了什么），然后（多）对称的概念，如“开放并关闭“，”折叠展开“，”展开和折叠“等。 – 2014-11-03 23:58:56

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

至于新codes，您可以通过线19和22 jQuery.toggleClass取出if..else语句简化代码，使它看起来像：

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

来源

2014-11-04 17:48:09

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

回答

相关问题