Eine effizientere Art, Funktionen für Schaltflächen zu schreiben

Question

Ich bin neu in jQuery, also bitte entschuldigen Sie mich, wenn diese Frage albern erscheint... Ich habe eine Website mit 20 Schaltflächen, die ähnliche, aber nicht genau gleiche Funktionen haben. Ich hatte geplant, separate Funktionen für jede Schaltfläche zu schreiben, aber ich frage mich, ob es einen einfacheren, effizienteren Weg gibt, dies zu tun. Hier sind 2 meiner Schaltflächen:

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

Jeder Rat ist sehr willkommen, danke!

Answer 1

Eine einfache Funktion, die die Werte parameterisiert, die sich ändern, sollte den Job erledigen

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

Answer 2

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

dann:

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

Machen Sie dasselbe für jeden Button. Wenn die Variable class1 immer "txt" plus die ID des gehoverten Elements sein wird, können Sie anstatt dies anzugeben, die class1 Zeilen in der button() Funktion zu folgender Version ändern:

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