Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Victor Enriquez
Victor Enriquez
22,766 Points

Passing a selector as an argument

I have this function but instead of writing $('.front img') , $('.bottom img') and so on I would like to pass that value as the argument of the next function

function revertHover(){
        $('.front img').css({"opacity" : 0.7,
                             "-webkit-transform" : "scale(1)",
                             "-moz-transform" : "scale(1)"});
        $('.PT').detach();
}

I have tried this but is not working :

function revertHover(face){
        $(face).css({"opacity" : 0.7,
                             "-webkit-transform" : "scale(1)",
                             "-moz-transform" : "scale(1)"});
        $('.PT').detach();
}

$('.front').hover(
    function(){
        $('.front img').css({"opacity" : 1,
                             "-webkit-transform" : "scale(2)",
                             "-moz-transform" : "scale(2)"});
        $('.popup').append("<p class='PT'>some stuff</p>).hide().fadeIn(800);
    }   
    ,revertHover(" '.front img' ") );

I am sure there is something pretty wrong, thanks a lot in advance for your help, I really appreciate!

2 Answers

You don't need the double quotes in

revertHover(" '.front img' ")

the following should work,

revertHover(".front img")

or

var side = $(".front img");
revertHover(side);
Victor Enriquez
Victor Enriquez
22,766 Points

Thanks for your answer, it helped me to solve the problem because that indeed was one mistake I had, the other one is that I found out I have to call the revertHover function within another function as the second handler in the hover method like this:

var frontSide = $(".front img");

function revertHover(side){
        side.css({"opacity" : 0.7,
                             "-webkit-transform" : "scale(1)",
                             "-moz-transform" : "scale(1)"});
        $('.PT').detach();
}

$('.front').hover(
    function(){
        $('.front img').css({"opacity" : 1,
                             "-webkit-transform" : "scale(2)",
                             "-moz-transform" : "scale(2)"});
        $('.popup').append("<p class='PT'>some stuff</p>).hide().fadeIn(800);
    }
//This is the other function I was talking about    
    ,function(){
        revertHover(frontSide);
    }
); 

Thanks again Kyle!

David Curtis
David Curtis
11,301 Points

i would suggest pasting your code into jsfiddle so we can see how it works together w/ the html etc. and then link your jsfiddle here.

sorry - meant to comment not post as an answer.