CODEWITHSUNDEEP
javascriptjquery
Cameron
Cameron

Reputation: 28803

Open and close panels based on jQuery cookies

I have the following variables which store the value of a set of cookies:

var filterDate = $.cookie('filterDate');
    var filterArea = $.cookie('filterArea');
    var filterCategory = $.cookie('filterCategory');
    var filterType = $.cookie('filterType');
    var filterLevel = $.cookie('filterLevel');
    var filterAge = $.cookie('filterAge');
    var filterAttendance = $.cookie('filterAttendance');

The name of the cookies and variables are also the ids of some elements that are on the page so for example: <div id="filterDate"></div>

What I want to do is very minimally (i.e. less code as possible) is check if any have the value of open and if so then run the code inside.

if (filterDate == 'open' || filterArea == 'open' || filterCategory == 'open' || filterType == 'open' || filterLevel == 'open' || filterAge == 'open' || filterAttendance == 'open') {
    $('#' + filter).find('.menuBox.nav ul').show();
    $('#' + filter).find('.menuBox.nav p').hide();
    $('#' + filter.find('h3 span').addClass('active');
}

How do I get the above to work as filter works for all the cookies without having to duplicate it per cookie and panel?

Upvotes: 0

Views: 195

Answers (3)

Eugene Naydenov
Eugene Naydenov

Reputation: 7295

Make an array of cookie names and then generate an object (map of key:pair values), where the keys are the items from array and the values are the values of an appropriate cookies. Then use loops to iterate through arrays/objects:

var filters = ['filterA', 'filterB', 'filterC'],
    cookies1 = {},
    cookies2 = {};
for(var i = 0, f; f = filters[i++];) {
    // really here will be $.cookie(f); instead of 'open':
    cookies1[f] = cookies2[f] = 'open';
}

// make one of second cookies set 'closed' for testing purpose:
cookies2['filterA'] = 'closed';

function allOpen(cookies) {
    for(var i in cookies) {
        if(cookies[i] != 'open') {
            return false;
        }
    }
    return true;
}

alert(allOpen(cookies1) + ', ' + allOpen(cookies2));
​

Upvotes: 0

Jeff Tratner
Jeff Tratner

Reputation: 17096

I wasn't clear if you were looking to trigger a different function based on the filter name. If so, you could store all the functions mapped to your cookies, then iterate over the names of the cookies, triggering the associated function if true: e.g.

var cookieList = ["filterDate", "filterArea"...];
var cookieMap = {"filterDate"=filterDateFn, "filterArea"=filterAreaFn...};

for (var i=0; i<numCookies; i++) {
if ($.cookie(cookieList[i]) == "open") {cookieMap[cookieList[i]]();}

if you only want to run one function, then you could skip making a cookieMap, and just run whatever success trigger you want, then break the for loop at that point.

Upvotes: 0

Claudi
Claudi

Reputation: 5416

A compact solution may be:

//The array below allows you to easily add new filters
var filterNames = ["filterDate", "filterArea", ..., "filterAttendance"];
for (var i in filterNames) {
    var filterName = filterNames[i];
    var filterStatus = $.cookie(filterName);
    if (filterStatus == 'open') {
        $('#' + filterName).find('.menuBox.nav ul').show();
        $('#' + filterName).find('.menuBox.nav p').hide();
        $('#' + filterName.find('h3 span').addClass('active');
    }
}

Upvotes: 2

Related Questions