基于阵列构建交换机

Build a switch based on array

本文关键字：构建 交换机 阵列 于阵列      更新时间：2023-09-26

我想根据我从查询字符串创建的数组创建一个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 创建的，以仅提取我需要的内容。

多谢！

@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(','));

哦，还有"谢谢，很多！":)

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

var switchObj = {            "#general"：函数 （） {                $（"#general"）.show（）;                $（"#controlpanel， #database"）.hide（）;            },            "#controlpanel"：函数 （） {                $（"#controlpanel"）.show（）;                $（"#general， #database"）.hide（）;            },            "#database"：函数 （） {                $（"#database"）.show（）;                $（"#general， #controlpanel"）.hide（）;            }        }

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

switchObj[target]();

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

您需要两个语句，而不是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();
  }
});

也许你正在寻找这样的东西？使用您正在使用的元素填充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
}

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

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