Build an array based switch

Question

I want to create a Javascript switch based on the array that I am creating from the query string. I am not sure how to proceed.

Say I have an array like this:

var myArray = ("#general","#controlpanel","#database"); 

I want to create this ...

 switch(target){ case "#general": $("#general").show(); $("#controlpanel, #database").hide(); break; case "#controlpanel": $("#controlpanel").show(); $("#general, #database").hide(); break; case "#database": $("#database").show(); $("#general, #controlpanel").hide(); break; } 

myArray can contain any number of elements, so I want the switch to be created dynamically based on the length of the array. The default case would always be the first option.

An array is created from location.href with a regex to extract only what I need.

Thanks a lot!

Answer 1

@Michael has the correct general answer, but here is a much simpler way to achieve the same goal:

 // Once, at startup var $items = $("#general,#controlpanel,#database"); // When it time to show a target $items.hide(); // Hide 'em all, even the one to show $(target).show(); // OK, now show just that one 

If you really only have an array of selectors, you can create them from jQuery via:

 var items = ["#general","#controlpanel","#database"]; var $items = $(items.join(',')); 

Oh, and "Thanks, Alo!" :

Answer 2

I think you need an object. Just identify the keys with the names of your elements that will correspond and will function as values. eg.

  var switchObj = {
             "#general": function () {
                 $ ("# general"). show ();
                 $ ("# controlpanel, #database"). hide ();
             },
             "#controlpanel": function () {
                 $ ("# controlpanel"). show ();
                 $ ("# general, #database"). hide ();
             },
             "#database": function () {
                 $ ("# database"). show ();
                 $ ("# general, #controlpanel"). hide ();
             }
         }

Then you can just call the one you want using

switchObj[target]();

Provided: this solution is better if you need to do clearly different things with each element, and unlike other answers, he focused on what the explicit subject of the question is, and not what the OP tried to execute with the specified data structure.

Answer 3

Instead of switch you will need two operators: first, to show the selected target, and secondly, to hide all the others.

 // Array as a jQuery object instead of a regular array of strings var myArray = $("#general,#controlpanel,#database"); $(target).show(); // Loop over jQuery list and unless the id of the current // list node matches the value of target, hide it. myArray.each(function() { // Test if the current node doesn't matche #target if ('#' + $(this).prop('id') !== target) { $(this).hide(); } }); 

In fact, the first statement can be included in the loop.

 var myArray = $("#general,#controlpanel,#database"); myArray.each(function() { if ('#' + $(this).prop('id') !== target) { $(this).hide(); } else { $(this).show(); } }); 

Answer 4

Perhaps you are looking for something like this? Fill myArray elements you use.

 var myArray = ["#general","#controlpanel","#database"]; var clone = myArray.slice(0); // Clone the array var test; if ((test = clone.indexOf(target)) !== -1) { $(target).show(); clone.splice(test,1); // Remove the one we've picked up $(clone.join(',')).hide(); // Hide the remaining array elements } 

Answer 5

here you do not need to explicitly list all cases, just let the array define them. make sure this target exists in the array, otherwise you will need an if statement.

 var target = "#controlpanel"; var items = ["#general","#controlpanel","#database"]; items.splice($.inArray(target, items), 1); $(target).show(); $(items.join(",")).hide(); items.push(target);