js - When true, do action. When false, undo action

Question

I am trying to add class "pulse" to $choose whenever $home has class "active", and then remove pulse whenever home does not have active, both being able to execute more than just once. The function I have seems to execute once then never check again:

$(function () {
    var $home = $(".tabs-group li:last-child a");
    var $choose = $(".tabs-group li");

    if($(home).hasClass("active")) {
    $choose.addClass("pulse");
    };

    if(!($home).hasClass("active")) {
        $choose.removeClass("pulse");
    };
});

I also tried breaking it into two functions, which also did not work.

$(function () {
    var $home = $(".tabs-group li:last-child a");
    var $choose = $(".tabs-group .sidebar .menu li");
    if(($home).hasClass("active")) {
    $choose.addClass("pulse");
    };

});

$(function () {
    var $home = $(".tabs-group li:last-child a");
    var $choose = $(".tabs-group .sidebar .menu li");
    if(!($home).hasClass("active")) {
    $choose.removeClass("pulse");
    };

});

Your code is naturally only going to execute once. It seems like you want to make this evented. When does the class of $home change? When is it active? — Will, Dec 11 '13 at 23:40

score 1 · Answer 1 · edited May 23 '17 at 12:03

This is a classic use case for toggleClass. Please see this example.

(function ($) {
  var jqueryMap, onClickHome;

  jqueryMap = {
    $home   : $('.tabs-group li:last-child a'),
    $choose : $('.tabs-group li')
  };

  onClickHome = function ( event ) {
    event.preventDefault();
    jqueryMap.$home.toggleClass( 'active' );
    jqueryMap.$choose.toggleClass( 
      'pulse', jqueryMap.$home.hasClass( 'active' )
    );
  }

  jqueryMap.$home.on( 'click', onClickHome );
}(jQuery));

Notice we use the originating event (the click, in this example) to toggle the 'active' class and then based on that set the 'pulse' class. Things get a little harder if you are trying to "magically" change the 'pulse' class whenever the 'active' class is changed - there isn't an easy solution here. Two options:

Create a wrapper that changes classes on elements. You can then trigger a 'classChange' event whenever this is called on any or all elements. This assumes you control the code and the calls to change class. If this is the case, then you probably have control over what changes the 'active' class, and so this method is probably not needed. However, this might approach make sense in a team setting (if you can get your team members to use your 'changeClass' wrapper!).
Create a changeClass event generic event. This is not too easy, as there is no native event in WebKit and so your element would need to be polled at some interval. See this discussion.

You might wish to consider namespacing your css to avoid collisions with other libraries :)

score 0 · Answer 2 · answered Dec 11 '13 at 23:42

You need to listen to a change in the elements.

$(function () {
    var $home = $(".tabs-group li:last-child a");
    var $choose = $(".tabs-group li");

    if($(home).hasClass("active")) {
    $choose.addClass("pulse");
    };

    if(!($home).hasClass("active")) {
        $choose.removeClass("pulse");
    };

  $(document).on('change', ".tabs-group li:last-child a", function(event){
    var $choose = $(".tabs-group li");        
    if $(event.target).hasClass('active') {
      $choose.addClass('pulse');
    } else {
      $choose.removeClass('pulse');
    }
  });
});

js - When true, do action. When false, undo action

2 Answers2