Executing jquery methods without eval

Question

I have repeating code of $("#id").addClass('disabled'); and $("#li-hzd").removeClass('disabled'); in my code for multiple ids in multiple functions. So I am trying to write some generic routine something like,

function toggleClass(id,classname,action){
    $("#"+ id") +"." + classname+"("+action+") 
}

which can be called something like,

toggleClass(id,'addClass','disabled');
toggleClass(id,'removeClass','disabled');

I believe something can be done using eval() but I also read it's bad practice to use eval. So any idea how to accomplish ?

Pranav C Balan · Accepted Answer · 2016-11-30T03:51:52.333

2

You can also get the jQuery methods by using bracket notation.

function toggleClass(id, action, classname){
    $("#"+ id)[action](classname) 
}

toggleClass(id,'addClass','disabled');
toggleClass(id,'removeClass','disabled');

edited Nov 30 '16 at 03:51

answered Nov 29 '16 at 19:41

Pranav C Balan

113,687
23
165
188

score 0 · Answer 2 · answered Nov 29 '16 at 19:42

You can access object properties via bracket notation []:

function toggleClass(id, classname, action) {
    $("#" + id)[classname](action) 
}

Side note: You seem to have gotten the naming of the parameters classname and action wrong. Should probably be the other way round to make more sense! The function name should be the action and the class name should be the classname. :-)

score 0 · Answer 3 · answered Nov 29 '16 at 19:43

Instead of using addClass and removeClass,use can just use toggleClass which adds the class name if not present else removes it

so change your toggleclass method to the following

function toggleClass(id,classname){
    $("#"+ id).toggleClass(classname) 
}

Executing jquery methods without eval

3 Answers3