Javascript custom function error

Question

function classChanger(path,changeClass,duration){
    $(path).removeClass(changeClass);
    $(this).addClass(changeClass);
)};

$('.flightDetails .option').classChanger('.flightDetails .option','selected',300);

I am trying to create reusable function. Console log: TypeError: $(".flightDetails .option").classChanger is not a function

Appreciate your help and time :)

Joseph Silber · Accepted Answer · 2012-08-08 15:33:38Z

5

You have to declare your classChanger on the jQuery prototype:

$.fn.classChanger = function(path, changeClass, duration) {
    $(path).removeClass(changeClass);
    return this.addClass(changeClass);
};

For more info, read the jQuery Plugin Authoring Guide.

Update: As pointed out in the comments, if you intend for path and the selector to always be identical, you should forgo path completely, and just use this throughout.

Since you haven't specified exactly what it is you're trying to do, I'm assuming you want to remove the class, then wait for the duration specified and then re-add the class. If that's the case, here's some sample code:

$.fn.classChanger = function(changeClass, duration) {
    var $this = this;

    setTimeout(function() {
        $this.addClass(changeClass);
    }, duration);

    return this.removeClass(changeClass);
};

$('.flightDetails .option').classChanger('selected', 300);

Here's the fiddle: http://jsfiddle.net/ur7SN/

edited Aug 8, 2012 at 15:33

answered Jul 27, 2012 at 16:24

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

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

6 Comments

apsillers Over a year ago

Why not just use remove the path argument entirely and use this instead of rebuilding an identical jQuery object with $(path)? (Admittedly, the OP doesn't say if path should ever differ from the selector, but I've got a strong hunch they're always the same.)

Joseph Silber Over a year ago

@apsillers - Because the OP has not specified what he's trying to achieve here. In his example, he's using identical selectors, but that might not always be the case.

apsillers Over a year ago

True enough. Personally, I'd provide it as an addendum to the answer ("if you intend that path and the selector should always be identical...", but I suppose my comment is addendum enough. (In any case, +1.)

Joseph Silber Over a year ago

@apsillers - If it's always the same, then this piece of code does absolutely nothing. It first removes the class, then adds it back in...

apsillers Over a year ago

True! I concede that original suspicion is becoming increasingly less likely. Perhaps, though, this is an incomplete implementation, considering the unused duration argument. My advice here is absolutely based on nothing but speculation.

|

Collectives™ on Stack Overflow

Javascript custom function error

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related