Construir un conmutador basado en la matriz

Question

Quiero crear un modificador Javascript basado en una matriz que estoy creando a partir de una cadena de consulta. No estoy seguro de cómo proceder.

Digamos que tiene una matriz de esta manera:

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

Quiero crear esta ...

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

miMatriz podría contener cualquier cantidad de elementos, así que quiero el cambio a crearse basado dinámicamente en la longitud de la matriz. El caso default siempre sería la primera opción.

La matriz se crea desde una ubicación.href con una expresión regular para extraer solo lo que necesito.

Gracias mucho!

Answer 1

@ Michael tiene la respuesta general correcta, pero aquí es una manera mucho más simple de lograr el mismo objetivo:

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

Si realmente sólo tiene una matriz de selectores a continuación, puede crear una colección de jQuery de ellos a través de :

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

Ah, y "Thanks, Alot!" :)

Answer 2

En lugar de switch, necesita dos instrucciones: primero, para mostrar el objetivo seleccionado, y el segundo para ocultar todos los demás.

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

De hecho, la primera declaración se puede incorporar al ciclo.

var myArray = $("#general,#controlpanel,#database"); 
myArray.each(function() { 
    if ('#' + $(this).prop('id') !== target) { 
    $(this).hide(); 
    } 
    else { 
    $(this).show(); 
    } 
}); 

Answer 3

Creo que quieres un objeto. Simplemente defina las claves con los nombres de sus elementos para que coincidan, y las funciones como los valores. p.ej.

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

A continuación, puede simplemente llamar a la persona que desea con

switchObj[target]();

Concedido: esta solución es mejor si se tiene que hacer las cosas de forma explícita diferentes con cada elemento, ya diferencia de las otras respuestas se se centró en lo que era el tema explícito de la pregunta, en lugar de lo que el OP intentaba lograr con dicha estructura de datos.

Answer 4

Tal vez usted está buscando para algo como esto? Rellene myArray con los elementos que está utilizando.

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 
} 

Answer 5

aquí no necesita enumerar explícitamente todos los casos, simplemente deje que la matriz los defina. asegúrese de que ese objetivo exista en la matriz; de lo contrario, necesitará una instrucción if.

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