带条件/默认状态的jQuery toggleClass

Question

场景：我有两个按钮。在两个按钮之间是一个具有用css定义的三个状态的V形图像。每个州都有一个中立的班级，卖掉它，购买它。取决于页面，V形可以处于三种状态中的任何一种。在鼠标悬停的两个按钮之一，我试图切换相应的类。例如：如果默认状态是“买入”类，那么买入按钮将不会对卖出它进行任何调整，它将按钮切换类“卖出”，但返回到默认的“买入”，通过鼠标购买。如果人字形处于中立状态，则悬浮在任一按钮上将切换购买/出售，但返回中性。

这是如此接近，但不完全是我想要的。

(function(){ 

    var buttonChevrons = (function(){ 

    var initialize = function(){ 
     _setDefault(); 
     _setListeners(); 
    } 

    //set default state 
    var _setDefault = function(){ 
     //$(".chevron").addClass("neutral"); 
    } 
    //set event listeners 
    var _setListeners = function(){ 
     //Buy button 
     $("#btnbuy").hover(function(){ 
     //default neutral state 
     if($(".chevron").hasClass("neutral")) { 
      $(".chevron").toggleClass("buy-it"); 
     } 
     //if buy it 
     else if($(".chevron").hasClass("buy-it")) { 
      $(".chevron").toggleClass(""); 
     } 
     //if sell it 
     else if($(".chevron").hasClass("sell-it")) { 
      $(".chevron").toggleClass("buy-it"); 
     } 
     }) 
     //Sell button 
     $("#btnsell").hover(function(){ 
     //default neutral state 
     if($(".chevron").hasClass("neutral")) { 
      $(".chevron").toggleClass("sell-it"); 
     } 
     //if sell it 
     else if($(".chevron").hasClass("sell-it")) { 
      $(".chevron").toggleClass(""); 
     } 
     //if buy it 
     else { $(".chevron").hasClass("buy-it") 
      $(".chevron").toggleClass("sell-it"); 
     } 
     }) 

    } 

    //call initialize 
    return {init: initialize} 
    }()); 

    //call buttonChevrons 
    this.buttonChevrons = buttonChevrons; 
}).call(this); 

$(document).ready(function(){ 

    buttonChevrons.init() 

}); 

Answer 1

只是因为我不能离开不够好孤单，我这样做是再次使用lambda函数生成的hover()方法的回调函数。在这种情况下，它不保存任何代码行，但作为一种通用技术，它可能很有用。 On jsfiddle ...

(function() { 
    var chevron = $("#chevron"); 
    var defaultState; 

    function toggle(tempClass, state) { 
     return function(evt) { 
      if (state) { chevron.toggleClass(defaultState, false); } 
      chevron.toggleClass(tempClass, state); 
      if (!state) { chevron.toggleClass(defaultState, true); } 
     }; 
    } 

    // decide on default state 
    $.each(['buy-it', 'sell-it', 'neutral'], function(idx, initialClass) { 
     if (chevron.hasClass(initialClass)) { 
      defaultState = initialClass; 
      return false; 
     } 
    }); 

    $("#btnbuy").hover(toggle('buy-it', true), toggle('buy-it', false)); 
    $("#btnsell").hover(toggle('sell-it', true), toggle('sell-it', false)); 
})();​ 

我不是强迫性的......诚实！今晚电视没什么好处。