Make toggleClass('active', function() { return bool; }) work

[[email protected]…]

toggleClass('active', bool) already works, setting or removing the "active" class dependent on the value of the passed boolean.

Please allow the boolean to be a boolean-returning function, deferring the decision to code. Thanks!

[Rick Waldron]

No use case? Well then... what's the use?

[[email protected]…]

Principle of least surprise and largest utility. Being able to write this:

$buttons = $('ul.buttons li a');
$buttons.click(function() {
  var clicked = this;
  $buttons.toggleClass('active', function() { return this === clicked });
});

instead of (as you currently need to) this:

$buttons = $('ul.buttons li a');
$buttons.click(function() {
  var clicked = this;
  $buttons.each(function() {
    $(this).toggleClass('active', this === clicked);
  });
});

What is particularly unfortunate about the current behaviour is that first code example doesn't throw any error - it just behaves as if the function passed wasn't even there, plain toggling the class for all elements in the jQuery selection.

[scottgonzalez]

That use case is usually handled with something along the lines of:

$buttons.not( this ).removeClass( "active" );
$( this ).addClass( "active" );

[[email protected]…]

To me the point of using toggleClass in the first place is to write DRY code.

Anyway, I am not here to argue or press my point – I thought it was just an accidental bug or missed corner case, especially as I've been using the great d3.js idiom selection.classed('active', bool_or_function_returning_bool) long enough to have that hard-wired, rather than breaking it down into multiple discrete manual steps in separate chained commands, or using a more complex chain, as in the fallback I opted for above.

It would just delight me if jQuery matched intuition.

[[email protected]…]

​https://github.com/mbostock/d3/wiki/Selections#wiki-classed if unfamiliar - it's super useful.

[sindresorhus]

or

$buttons.removeClass('active').siblings().addClass('active');

[mikesherov]

+1

[gnarf]

+0, What gets passed into the function... index, hasClass ???

[dmethvin]

-1, not needed