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

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

$（＆＃39;＃small_text＆＃39;）徘徊。（ACC（＆＃39;小＆＃39;，真），ACC（＆＃39;小＆＃39;，假））; 到

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

图片不会改变，但这是因为＆＃39;尺寸＆＃39;是不明身份的。但有没有办法使用我写的东西，而不必为每个图像设置相同的功能。

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

Answer 2

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

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

Answer 3

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

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

变量可以通过jquery悬停函数传递

3 个答案: