javascript - Build a switch based on array - Stack Overflow

admin管理员组

文章数量:1344238

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!

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!

• javascript
• jquery
• arrays
• switch-statement

Share Improve this question Follow edited May 6, 2012 at 19:19 Phrogz 304k113113 gold badges667667 silver badges757757 bronze badges asked May 6, 2012 at 19:09 user1378430user1378430 1

• 2 Side note: myArray should be using brackets rather than parenthesis. As is, myArray === "#database". – Jonathan Lonowski Commented May 6, 2012 at 19:19

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

@Michael has the correct general answer, but here's a far simpler way to acplish 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!" :)

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 acplish with said data structure.

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();
  }
});

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
}

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);

本文标签： javascriptBuild a switch based on arrayStack Overflow