Can variables be passed through jquery hover function

Question

I have a jquery that works by passing variables through the .hover function. I have a series of images that I would like to change if the mouse hovered over them. I could just write something like:

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

For each image/div or whatever but this seems more time consuming. I tried using this short hand version which I wrote but nothing happens.

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

There are no error in the console log and the images don't change but if I change

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

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

The images don't change but that is because the value of 'size' is unidentified. But is there a way of using what I have wrote instead of having to set the same function for each image.

Victory · Accepted Answer · 2014-05-23 22:06:48Z

1

hove takes Function objects so you acc function should return such an object, try the following

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

answered May 23, 2014 at 22:06

Victory

5,9113 gold badges28 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Barmar Over a year ago

I was thinking of posting this kind of answer. But if I did, I would put the if() outside return function(). This creates an additional closure, but it has to do less work every time it's called.

Paul Ledger Over a year ago

Thats exactly what I was trying to do, could you explain how adding the return function works. Its not something I have come across before being a designer not a preogramer

Victory Over a year ago

@PaulLedger, Function objects are objects that can be called. The $.hover() function look for the hover event to be fired and then calls whatever Function objects were passed to it. The way you had it written you were not returning from acc anything callable (infact you were returning a boolean). i.e. $.hover(foo()) calls the function foo() and then $.hover() tries to call whatever was returned from foo().

Paul Ledger Over a year ago

Thank you, its good to know how things work rather than coping blindly. I wont learn other wise

Barmar · Accepted Answer · 2014-05-23 22:04:53Z

0

The arguments to .hover() must be functions. You need to do:

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

answered May 23, 2014 at 22:04

Barmar

789k57 gold badges555 silver badges669 bronze badges

Comments

hkrauss2 · Accepted Answer · 2014-05-23 22:22:10Z

0

The two functions in your first code block will receive a reference to the element that triggered the event in "this". For example let's assume you have a <div class="imgList"> with image tags within then this could work for you:

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

answered May 23, 2014 at 22:22

hkrauss2

3072 silver badges9 bronze badges

Collectives™ on Stack Overflow

Can variables be passed through jquery hover function

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related