变量可以通过jquery hover函数传递吗答案

【问题标题】：Can variables be passed through jquery hover function变量可以通过jquery hover函数传递吗
【发布时间】：2014-05-23 21:59:35
【问题描述】：

我有一个 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)); 到

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

图像不会改变，但那是因为“大小”的值是未知的。但是有没有一种方法可以使用我写的东西，而不必为每个图像设置相同的功能。

【问题讨论】：

标签： javascript jquery hover mouseevent jquery-hover

【解决方案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');
      }
    }
  }
}

【讨论】：

我正在考虑发布这种答案。但如果我这样做了，我会将if() 放在return function() 之外。这会创建一个额外的闭包，但每次调用它时它必须做的工作更少。
这正是我想要做的，你能解释一下添加返回函数是如何工作的吗？这不是我在成为设计师而不是 preogramer 之前遇到过的事情
@PaulLedger, Function 对象是可以调用的对象。 $.hover() 函数查找要触发的悬停事件，然后调用传递给它的任何 Function 对象。你写它的方式你没有从acc返回任何可调用的东西（事实上你正在返回一个布尔值）。即$.hover(foo()) 调用函数foo()然后$.hover()尝试调用从foo()返回的任何内容。
谢谢，知道事情是如何运作的而不是盲目应对是件好事。我不会学习其他方面的知识

【解决方案2】：

.hover() 的参数必须是函数。你需要做的：

$("#small_text").hover(function() {
    acc('small', true);
}, function() {
    acc('small', false);
});

【讨论】：

【解决方案3】：

您的第一个代码块中的两个函数将接收对触发“this”中事件的元素的引用。例如，假设您有一个带有图像标签的<div class="imgList">，那么这可能适合您：

$('div.imgList img').hover(function () {
   $(this).css("background-color","yellow");
},function () {
   $(this).css("background-color", "pink");
});

【讨论】：