CODEWITHSUNDEEP
javascriptjquerycssvariablesjquery-selectors
user2817200
user2817200

Reputation: 1117

passing variable as JQuery CSS selector not working

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?

Upvotes: 0

Views: 390

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

$(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))

Upvotes: 1

PSL
PSL

Reputation: 123739

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

Upvotes: 2

Related Questions