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

然后：

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

对每个按钮执行相同操作。如果class1变量始终为“txt”加上正在悬停的元素的ID，那么您可以将class1函数中的button()行更改为此版本，而不是提供它：

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

更有效的编写按钮功能的方法

2 个答案: