javascript - jquery的hover函数可以传递变量吗

Question

我有一个 jquery，它通过 .hover 函数传递变量来工作。我有一系列图像，如果鼠标悬停在它们上方，我想更改它们。我可以写这样的东西:

$("p").hover(function(){
  $("p").css("background-color","yellow");
  },function(){
  $("p").css("background-color","pink");
});

对于每个图像/div 或其他任何内容，但这似乎更耗时。我尝试使用我编写的这个速记版本，但没有任何反应。

function acc(size,tog){e
    if(tog){
        $('#' + size + '_text').attr('src','assessts/icons/text_' + size + '_active.png');
        if(current_acc != size){
            $('#' + current_acc + '_text').attr('src','assessts/icons/text_' + current_acc + '.png');
        }
    }else{
        $('#' + size + '_text').attr('src','assessts/icons/text_' + size + '.png');
        if(current_acc != size){
            $('#' + current_acc + '_text').attr('src','assessts/icons/text_' + current_acc + '_active.png');
        }
    }
}
$(function(){
    $('#small_text').hover(acc('small',true),acc('small',false));
    $('#med_text').hover(acc('small',true),acc('small',false));
    $('#large_text').hover(acc('small',true),acc('small',false));
});

控制台日志中没有错误，图像也没有改变，但如果我改变了

$('#small_text').hover(acc('small',true),acc('small',false)); to

$('#small_text').hover(acc,acc);

图像没有改变，但这是因为“size”的值未识别。但是有没有一种方法可以使用我编写的内容，而不必为每个图像设置相同的函数。

Answer 1

hove 需要 Function 对象，因此您的 acc 函数应该返回这样的对象，请尝试以下操作

function acc(size,tog){
  return function () {
    if(tog){
      $('#' + size + '_text').attr('src','assessts/icons/text_' + size + '_active.png');
      if(current_acc != size){
        $('#' + current_acc + '_text').attr('src','assessts/icons/text_' + current_acc + '.png');
      }
    }else{
      $('#' + size + '_text').attr('src','assessts/icons/text_' + size + '.png');
      if(current_acc != size){
        $('#' + current_acc + '_text').attr('src','assessts/icons/text_' + current_acc + '_active.png');
      }
    }
  }
}