CODEWITHSUNDEEP
javascriptjqueryarraysswitch-statement
user1378430
user1378430

Reputation:

Build a switch based on array

I want to create a Javascript switch based on an array I'm creating from a query string. I'm not sure how to proceed.

Let's 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 could contain any amount of elements so I want the switch to be created dynamically based on length of the array. The default case would always be the first option.

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

Thanks alot!

Upvotes: 5

Views: 5989

Answers (5)

goat
goat

Reputation: 31823

here you dont need to explicitly list all the cases, just let the array define them. make sure though, that target exists in the array, otherwise you'll 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);

Upvotes: 0

dwerner
dwerner

Reputation: 6602

I think you want an object. Just define keys with the names of your elements to match, and functions as the values. e.g.

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 with

switchObj[target]();

Granted: this solution is better if you need to do explicitly different things with each element, and unlike the other answers it focused on what the explicit subject of the question was, rather than what the OP was trying to accomplish with said data structure.

Upvotes: 2

Phrogz
Phrogz

Reputation: 303371

@Michael has the correct general answer, but here's a far simpler way to accomplish the same goal:

// Once, at startup
var $items = $("#general,#controlpanel,#database");

// When it's 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 then you can create a jQuery collection of them via:

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

Oh, and "Thanks, Alot!" :)

Upvotes: 5

Pete
Pete

Reputation: 1554

Perhaps you're looking for something like this? Populate myArray with the elements you're using.

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
}

Upvotes: 0

Michael Berkowski
Michael Berkowski

Reputation: 270677

Rather than a switch, you need two statements: first, to show the selected target, and second to hide all 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's doesn't matche #target
  if ('#' + $(this).prop('id') !== target) {
    $(this).hide();
  }
});

In fact, the first statement can be incorporated into the loop.

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

Upvotes: 1

Related Questions