более эффективный способ написания функций для кнопок

Question

Я новичок в jquery, поэтому, пожалуйста, извините, если этот вопрос кажется глупым ... У меня есть веб-сайт с 20 кнопками, которые имеют похожие, но не точные функции.Я планировал написать отдельные функции для каждой кнопки, но мне было интересно, есть ли более простой и эффективный способ сделать это.вот две мои кнопки:

$('#architect').hover (function() { 
  $('.blank').addClass('txtarchitect');  
  $('.bates,.han').addClass('over');  
  }, 
  function(){ 
  $('.blank').removeClass('txtarchitect');  
  $('.bates,.han').removeClass('over');  
  } 
); 
});

$('#educator').hover (function() { 
  $('.blank').addClass('txteducator');  
  $('.lee,.gorman').addClass('over'); 
  }, 
  function(){ 
  $('.blank').removeClass('txteducator');  
  $('.lee,.gorman').removeClass('over');  
  } 
); 
});

Любой совет с благодарностью, спасибо!

Answer 1

function button(class1, class2, class3, dir){
    if(dir == 1){
        $(this).addClass(class1);
        $("."+class2+", ."+class3).addClass("over");
    }else{
        $(this).removeClass(class1);
        $("."+class2+", ."+class3).removeClass("over");
    }
}

затем:

$("#educator").hover(function(){
    button("txteducator", "bates", "han", 1);
}, function(){
    button("txteducator", "bates", "han", 0);
});

Сделайте то же самое для каждой кнопки.Если переменная class1 всегда будет иметь значение «txt» плюс идентификатор находящегося элемента, то вместо предоставления вы можете изменить строки class1 в функции button() на версии этого:

$(this).addClass("txt"+$(this).id());

Answer 2

Простая функция, которая параметризует изменяемые значения, должна выполнять работу

function addHoverHandler( buttonId, blankCls, overClasses) {
   $('#'+ buttonId).hover(
     function(){
       $('.blank').addClass(blankCls);  
       $(overClasses).addClass('over');  
     },
     function (){
       $('.blank').removeClass(blankCls);  
       $(overClasses).removeClass('over');   
     }
   );
}

var buttons = [
   {btnId: 'educator', blankCls: 'texteducator', overClasses: '.lee,.gorman'},
   {btnId: 'architect', blankCls: 'textatchitect', overClasses: '.bates,.han'}
];



for (var i =0; i < buttons.length; i++) {
   var btn = buttons[i];
   addHoverHandler(btn.btnId, btn.blankCls, btn.overClasses);
}