passing variable as JQuery CSS selector not working

Question

Here is my first part of the code:

$('ul li').click(function(){ //when an <li> is clicked

    $('ul .clicked').removeClass('clicked'); // remove .clicked class from any other <li>'s inside a <ul>
    $(this).addClass('clicked'); // add .clicked class to the clicked <li> ($(this))

    screen = $(this).attr('id'); // screen = the clicked elements' id
    screen = "#" + screen; // screen = the clicked elements' id with a # infront of it 
    $(screen).screenSlide(); // is basically = $('#elementsID').screenSlide();, correct?
});

It's weird because in a previous function which I wrote, I did the exact same thing except the last step, instead of passing screen as a selector, I pushed screen inside an Array and then I grabbed array[0] (which was #elementsID without any quotations) and used that as a selector and it worked. But moving forward, screenSlide is

function screenSlide(){ // $(this) should = an <li> who's id is screen
    var test = $(this).attr('class');
    alert(test);
    $(this).addClass('current'); // add the .current class to $(this), which should be an <li>
    $(this).slideDown();
};

now, alert test didn't alert anything, so I'm guessing that passing screen as a CSS selector didn't work. As you can see, the screenSlide function is supposed to add a class to the $(this) < li > and then make it slide up.

Any idea on what's wrong?

Do you mean that the alert box shows up with undefined, or does it not show up at all? Also, are there any errors in the console? — Robin
– Robin, Commented Oct 10, 2013 at 2:31
@SuperScript , when I do that, the alert box says undefined. — user2817200
– user2817200, Commented Oct 10, 2013 at 2:38
@PSL , perfect, worked! And no I wasn't duplicating ID's, you are right, I could've just down screenSlide(this); — user2817200
– user2817200, Commented Oct 10, 2013 at 2:45

PSL · Accepted Answer · 2013-10-10 02:37:32Z

The way you have defined it, screenSlide is just a function, not attached to jquery object. Inorder to be invoked as a function on jquery object you need to add it as $.fn.screenSlide.

$.fn.screenSlide = function(){
    var test =this.attr('class');
    alert(test);
    this.addClass('current'); // add the .current class to $(this), which should be an <li>
    this.slideDown();
    return this; //return this to enable chaining
}

Inside this function you dont need to redefind the jquery object as $(this) since this will already be a jquery object, and also return this to enable it for chaining.

If you want to invoke it separately then you can use function.call

screenSlide.call($(this));

With this this is again jquery object you dont need to do $(this) inside your function all over again.

By the way it seems like you just need to invoke it as $(this).screenSlide(); unless you are duplicating the ids, in which case it won't behave the way you expect anyways.

Demo

Arun P Johny · Accepted Answer · 2013-10-10 03:59:43Z

1

$(screen).screenSlide(); will throw an error saying there is no such method as screenSlide for object because screenSlide is not a method associated with the jQuery wrapper object. You need to write screenSlide as a plugin for that

$.fn.screenSlide = function(){
    var test = this.attr('class');
    alert(test);
    this.addClass('current'); // add the .current class to $(this), which should be an <li>
    this.slideDown();
}

or invoke screenSlide with a custom context like

screenSlide.call($(screen))

edited Oct 10, 2013 at 3:59

answered Oct 10, 2013 at 2:29

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

2 Comments

user2817200 Over a year ago

Hm interesting. So how do I make screenSlide a method associated with the JQuery wrapper object?

Arun P Johny Over a year ago

@user2817200 if you write it as a plugin as given above it will be associated with the jQuery wrapper object

Collectives™ on Stack Overflow

passing variable as JQuery CSS selector not working

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related