Question

This code was working fine:

if (chk.checked)
    div.show(delay);
else
    div.hide(delay);

I tried to be clever by refactoring it like this:

var showHide = chk.checked ? div.show : div.hide;
showHide(delay);

but that caused an exception inside jQuery. Shouldn’t the 2 pieces of code be equivalent?

Answer 1

You can do this instead:

var showHide = chk.checked ? 'show' : 'hide';
div[showHide](delay);

If you just save a reference to the function, you’ll lose the receiver — that is, inside the function the this reference will be wrong.

I guess you could do this instead:

var showHide = chk.checked ? div.show : div.hide;
showHide.call(div, delay);

edit or, to avoid referring to “div” twice in the first line:

var showHide = div[chk.checked ? 'show' : 'hide'];

I’m not sure such a refactoring makes anything clearer 🙂