JS模塊目標類

我是新來的模塊化JS。我想一個簡單的類切換轉換成一個模塊，但我不能定位正確LI。這切換了所有的箭頭。JS模塊目標類

var toggleArrow = { 
    init: function(){ 
     this.cacheDom(); 
     this.bindEvents(); 
     //this.render(); 
    }, 
    cacheDom: function(){ 
     this.$el = $('.has-accordion'); 
    }, 
    bindEvents: function(){ 
     this.$el.on('show hide',this.toggleAccordion.bind(this)); 
    }, 
    toggleAccordion: function(e){   
     this.$el.find('i').toggleClass('page-arrow-down'); 
    } 

}; 
toggleArrow.init(); 
// spaguetti code being converted 
// $('.collapsible').on("show", ".has-accordion", function(event){ 
//  $(this).find('i').addClass("page-arrow-down"); 
// }); 
// $('.collapsible').on("hide", ".has-accordion", function(event){ 
//  $(this).find('i').removeClass("page-arrow-down"); 
// });

樣本HTML

<ul> 
<li class="has-accordion" data-toggle="collapse" data-target="#collapseOne">One<i class="page-arrow-next"></i> 
<ul id="collapseOne" class="collapse"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
</ul> 
</li> 
<li class="has-accordion" data-toggle="collapse" data-target="#collapseTwo">Two<i class="page-arrow-next"></i> 
<ul id="collapseTwo" class="collapse"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
</ul> 
</li> 
</ul>

來源

2015-12-02 sandraqu