Question

I am new to jquery so please excuse me if this question seems silly… I have a website with 20 buttons which have similar but not exact functions. I have been planning on writing separate functions for each button but was wondering if there was an easier, more efficient way of doing this. here are 2 of my buttons:

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

any advice is greatly appreciated, thanks!

Answer 1

A simple function that parameterizes the values that change should do the job

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);
}