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();
            }、
            "#データベース": 関数 () {
                $("#データベース").show();
                $("#general, #controlpanel").hide();
            }
        }

次に、必要なものを呼び出すだけです

switchObj[target]();

確かに、このソリューションは、各要素で明示的に異なることを行う必要がある場合に適しています。他の回答とは異なり、OPが上記のデータ構造で達成しようとしていたことではなく、質問の明示的な主題が何であるかに焦点を当てました。

于 2012-05-06T19:16:01.037 に答える
1

ではなく、switch2つのステートメントが必要です。1つは選択したターゲットを表示するため、もう1つは他のすべてを非表示にするためです。

// 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 に答える