6

我想根据我从查询字符串创建的数组创建一个 Javascript 开关。我不确定如何进行。

假设我有一个这样的数组：

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

我想创建这个...

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 可以包含任意数量的元素，因此我希望根据数组的长度动态创建开关。案件default永远是第一选择。

该数组是从带有正则表达式的 location.href 创建的，以仅提取我需要的内容。

非常感谢！

4

5 回答 5

5

@Michael 有正确的一般答案，但这是实现相同目标的更简单的方法：

// 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

如果你真的只有一个选择器数组，那么你可以通过以下方式创建一个 jQuery 集合：

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

哦，还有“谢谢，很多！” :)

于 2012-05-06T19:18:11.897 回答
2

我想你想要一个对象。只需使用要匹配的元素名称定义键，并将其用作值。例如

var switchObj = {
            “#general”：函数（）{
                $("#general").show();
                $("#controlpanel, #database").hide();
            },
            “#controlpanel”：函数（）{
                $("#controlpanel").show();
                $("#general, #database").hide();
            },
            "#database": 函数 () {
                $("#database").show();
                $("#general, #controlpanel").hide();
            }
        }

然后你可以打电话给你想要的

switchObj[target]();

授予：如果您需要对每个元素做明确不同的事情，这个解决方案会更好，并且与其他答案不同，它关注问题的明确主题是什么，而不是 OP 试图用所述数据结构完成什么。

于 2012-05-06T19:16:01.037 回答
1

而不是 a switch，您需要两个语句：第一，显示选定的目标，第二，隐藏所有其他目标。

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

事实上，第一条语句可以并入循环中。

var myArray = $("#general,#controlpanel,#database");
myArray.each(function() {
  if ('#' + $(this).prop('id') !== target) {
    $(this).hide();
  }
  else {
    $(this).show();
  }
});
于 2012-05-06T19:14:51.657 回答
0

也许你正在寻找这样的东西？填充myArray您正在使用的元素。

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
}
于 2012-05-06T19:20:35.600 回答
0

在这里您不需要明确列出所有情况，只需让数组定义它们即可。但请确保该目标存在于数组中，否则您将需要一个 if 语句。

var target = "#controlpanel";
var items = ["#general","#controlpanel","#database"];
items.splice($.inArray(target, items), 1);
$(target).show();
$(items.join(",")).hide();
items.push(target);
于 2012-05-07T04:31:35.593 回答