jquery - 为按钮编写函数的更有效方法

Question

我是 jquery 新手，所以如果这个问题看起来很愚蠢，请原谅我...我有一个网站，有 20 个按钮，它们具有相似但不完全相同的功能。我一直计划为每个按钮编写单独的函数，但想知道是否有更简单、更有效的方法来做到这一点。这是我的 2 个按钮:

$('#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 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);
}