jquery - 带有条件/默认状态的 jQuery toggleClass

Question

场景：我有两个按钮。在两个按钮之间是一个 V 形图像，具有用 css 定义的三个状态。每个州都有一个中立的阶级，卖它，买它。根据页面的不同，V 形可能处于三种状态中的任何一种。在鼠标悬停在两个按钮中的任何一个上时，我试图切换相应的类。示例：如果默认状态为“buy-it”类，将鼠标悬停在“购买”按钮上将不会执行任何操作，将鼠标悬停在“出售”按钮上将切换“出售”类，但返回默认的“购买”，鼠标悬停时购买. 如果 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()方法生成回调函数。在这种情况下，它不会保存任何代码行，但作为一种通用技术，它可能很有用。在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));
})();​

我不是强迫症......诚实！今晚电视上没有什么好东西。