アレイに基づいてスイッチを構築する

Question

クエリ文字列から作成している配列に基づいて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から作成されます。

ありがとう！

Answer 1

@Michaelは、同じ目標を達成するためにはるかに簡単な方法を正しい一般的な答えを持っていますが、ここにあります：

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

ああ、"Thanks, Alot!" :)

Answer 2

switchではなく、最初に選択したターゲットを表示し、2番目の表示をすべて非表示にする必要があります。

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

Answer 3

あなたはオブジェクトが必要だと思います。一致させる要素の名前をキーとして定義し、値として機能します。例えば

 
var switchObj = { 
      "#general": function() { 
       $("#general").show(); 
       $("#controlpanel, #database").hide(); 
      }, 
      "#controlpanel": function() { 
       $("#controlpanel").show(); 
       $("#general, #database").hide(); 
      }, 
      "#database": function() { 
       $("#database").show(); 
       $("#general, #controlpanel").hide(); 
      } 
     } 

次に、あなただけの確か

switchObj[target]();

とあなたが望むものを呼び出すことができます：あなたは、各要素を明示的に異なることを行う必要がある場合は、このソリューションが優れている、と他の回答とは違って、それをOPが前記データ構造で達成しようとしていたものではなく、質問の明白な主題が何であるかに焦点を当てた。あなたが本当にのみ、あなたは経由でそれらのjQueryのコレクションを作成することができセレクタの配列を持っている場合は

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

：

Answer 4

おそらく、あなたが探していますこのようなもののために？ myArrayに、使用している要素を入力してください。

Answer 5

ここでは、すべてのケースを明示的にリストする必要はなく、配列で定義するだけです。そのターゲットが配列内に存在することを確認します。そうでない場合は、ifステートメントが必要です。

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