[jQuery] Re: Passing vars to function

[Maginot Junior]

Hmm
thanks for the help!

This help me understand more of how jquery works, just to keep update, I did
the follow to workaround:

$("#artigos_listagem li:even").addClass('even');
$("#artigos_listagem li").mouseover(function(e){
$(this).css({
background: "#aa"
});
});
$("#artigos_listagem li").mouseout(function(e){
if ($(this).hasClass('even')) {

$(this).css({
background: '#E7EDF1'
});
} else {
$(this).css({
background: '#ff'
});
}
});


but I'll use the toggle function, looks  much better and smarter

best regards!


Maginot Júnior
"the game of life"
LPIC - CCNA - ¿Designer?


On Tue, Jan 13, 2009 at 2:48 AM, seasoup  wrote:

>
> untested, but the point is you can pass an object as the second
> parameter of the .bind() function.  Doesn't work with the shortcuts as
> far as I know.  Then, you can access those object in the event.data
> property of the event passed into the function.
>
> $("#artigos_listagem li").mouseover(function(e){
>var orgBg = $(this).css('background');
>$(this).css({
>background: "#aa"
>});
>});
> $("#artigos_listagem li").bind('mouseout', { 'orgBg' :
> orgBg}, function(e){
>$(this).css({
>background: e.data.orgBg
>});
>});
>
> I'm also not quite sure what you are attempting... it looks like those
> li are getting a mouseover/mouseout  function that sets the background
> to one color when rolling over and to another when rolling off.  If
> that is the case:
>
> $("#artigos_listagem li").toggle(function() {
>  $(this).css({'background':'#aa'});
> },
> function() {
>  $(this).css({'background':'#aa'});
> })
>
> If the colors aren't known beforehand, since you are setting it
> dynamically on li's with different background colors then you could
> save the current background color as a custom attribute using .attr()
> or as data on the object using .data()
>
> http://docs.jquery.com/Internals/jQuery.data
>

[jQuery] Re: Passing vars to function

[seasoup]

untested, but the point is you can pass an object as the second
parameter of the .bind() function.  Doesn't work with the shortcuts as
far as I know.  Then, you can access those object in the event.data
property of the event passed into the function.

$("#artigos_listagem li").mouseover(function(e){
var orgBg = $(this).css('background');
$(this).css({
background: "#aa"
});
});
$("#artigos_listagem li").bind('mouseout', { 'orgBg' :
orgBg}, function(e){
$(this).css({
background: e.data.orgBg
});
});

I'm also not quite sure what you are attempting... it looks like those
li are getting a mouseover/mouseout  function that sets the background
to one color when rolling over and to another when rolling off.  If
that is the case:

$("#artigos_listagem li").toggle(function() {
  $(this).css({'background':'#aa'});
},
function() {
  $(this).css({'background':'#aa'});
})

If the colors aren't known beforehand, since you are setting it
dynamically on li's with different background colors then you could
save the current background color as a custom attribute using .attr()
or as data on the object using .data()

http://docs.jquery.com/Internals/jQuery.data

[jQuery] Re: Passing vars to function

[Scott Sauyet]

Maginot Junior wrote:

HI, I have a simples question, hope to get some answer...

Im having difficulty to pass vars to functions like: [ ... ]

$("#artigos_listagem li").mouseout(function(e){
$(this).css({
background: orgBg
});
});


Like you can see, inside the second function Im trying to use the orgBg 
vars, and I would like to pass like .mouseout(function(e, otherVar){


You won't be able to do it that simply, as the mouseout won't call it 
with your custom parameters.  But you can add a closure. [1]


This is completely untested, but I think something like this would work:

$("#artigos_listagem li").mouseout((function(bkground) {
return function(e){
$(this).css({background: bkground});
})(orgBg);
});

This syntax creates and immediately executes an anonymous function that
returns a function in a closure that includes your val as param.

(function(param) {return function() {...})(val)

There is no real reason except for explanations like the above to use 
the dummy variable bkground, so this is probably better once you 
understand what's happening above:


$("#artigos_listagem li").mouseout((function(orgBg) {
return function(e){
$(this).css({background: orgBg});
})(orgBg);
});

Cheers,

  -- Scott

[1] The first few references on Google are all pretty good: 
http://www.google.com/search?q=javascript+closure