Создайте переключатель на основе массива

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

туАггау может содержать любое количество элементов, поэтому я хочу, переключатель должен быть создан динамически основанный на длине массива. Случай default всегда был бы первым вариантом.

Массив создается из location.href с регулярным выражением, чтобы извлечь только то, что мне нужно.

Спасибо большое!

Answer 1

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

О, и "Thanks, Alot!" :)

Answer 2

Вместо 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(); 
    } 
}); 

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 пытался выполнить с указанной структурой данных.

Answer 4

Возможно, вы ищете для чего-то подобного? Введите 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 
} 

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