조건/기본 상태가있는 jQuery 토글 클래스

Question

시나리오 : 두 개의 버튼이 있습니다. 두 개의 버튼 사이에는 css로 정의 된 세 가지 상태를 가진 갈매기 모양의 이미지가 있습니다. 각 주에는 계급 중립적 인 것이 있고, 그것을 팔고, 구매하십시오. 페이지에 따라 셰브론은 세 가지 상태 중 하나에있을 수 있습니다. 두 버튼 중 하나의 mouseover에서 각 클래스를 토글하려고합니다. 예 : 기본 상태가 "buy-it"클래스 인 경우 구매 버튼을 클릭하면 판매용 버튼에 마우스를 올리지 않고 "sell-it"클래스를 토글하지만 기본 "buy-it"으로 돌아가 mouseout에서 구매합니다 . 쉐브론이 중립 상태 인 경우 어느 버튼이든 마우스를 올리면 buy-it/sell-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() 

}); 

Answer 1

그냥 나 혼자 충분히 떠날 수 없기 때문에, 나는 다시 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)); 
})();​ 

나는 강박하지 않다 ... 정직하다! 오늘 밤 텔레비전에서 좋은 소식은 없어.