0

シナリオ: 2 つのボタンがあります。2 つのボタンの間には、css で定義された 3 つの状態を持つシェブロン イメージがあります。各州には、ニュートラル、セルイット、バイイットのクラスがあります。ページに応じて、シェブロンは 3 つの状態のいずれかになります。2 つのボタンのいずれかをマウスオーバーすると、それぞれのクラスを切り替えようとしています。例: デフォルトの状態が「buy-it」クラスの場合、buy it ボタンの上にマウスを置いても何もしません。sell it ボタンの上にマウスを置いても、クラス「sell-it」が切り替わりますが、デフォルトの「buy-it」に戻ります。 . シェブロンがニュートラル状態の場合、マウスをいずれかのボタンに重ねると、バイイット/セルイットが切り替わりますが、ニュートラルに戻ります。

それはとても近いですが、私が望むことを完全には行っていません。

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

});
4

1 に答える 1

0

放っておけないという理由だけで、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));
})();​

私は強迫的ではありません...正直です！今夜のテレビでは、何も良いことはありません。

于 2012-10-25T04:51:44.613 に答える