Question

Scenario:

A simple html page exists with few buttons on Top (e.g. day, week) and BOTTOM (filter1 and filter2) of the page and Graph on center.

The graph displays a data based on selected filters.

Problem:

when user selects the filter2 I need to know what the user selected previously on TOP buttons so that the data can be displayed accordingly.

I’m using global variable to track the last selected buttons. This means lots of switch statements. I’m wondering if this is the most elegant way to solve this issue or is there any magic. function exist on Jquery.

Answer 1

Let’s assume the top buttons have class="topButton" and the filter buttons have class="filterButton" and all buttons have unique ids, then the jQuery will look something like this:

$(function(){
    var topButtons = $(".topButton").on('click', function() {
        var $this = $(this);
            id = $this.attr('id');
        if($this.hasClass('selected')) { return; }
        topButtons.removeClass('selected');
        $this.addClass('selected');
        //perform click action here
    });

    $('.filterButton').on('click', function() {
        var $this = $(this);
            id = $this.attr('id'),
            selectedTopButtonId = $('.topButton').filter('.selected').attr('id');
        //perform filter action here
    });
});

In both cases, the variable id lets you know which button was clicked.

By setting class="selected" on the selected top button, you can style the button and have something to test without needing to resort to a global variable.