Xây dựng công tắc dựa trên mảng

Question

Tôi muốn tạo công tắc Javascript dựa trên mảng mà tôi đang tạo từ chuỗi truy vấn. Tôi không chắc chắn làm thế nào để tiến hành.

Hãy nói rằng tôi có một mảng như thế này:

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

Tôi muốn tạo này ...

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 có thể chứa bất kỳ số lượng các yếu tố vì vậy tôi muốn chuyển đổi phải được tạo ra tự động dựa trên độ dài của mảng. Trường hợp default sẽ luôn là tùy chọn đầu tiên.

Mảng được tạo từ vị trí.href bằng regex để chỉ trích xuất những gì tôi cần.

Cảm ơn rất nhiều!

Answer 1

@ Michael có câu trả lời chung đúng, nhưng đây là một cách đơn giản hơn nhiều để đạt được cùng một mục tiêu:

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

Nếu bạn thực sự chỉ có một mảng của selectors sau đó bạn có thể tạo một bộ sưu tập jQuery trong số họ qua :

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

Oh, và "Thanks, Alot!" :)

Answer 2

Thay vì switch, bạn cần hai câu lệnh: trước tiên, để hiển thị mục tiêu đã chọn và thứ hai để ẩn tất cả các mục tiêu khác.

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

Thực tế, câu lệnh đầu tiên có thể được kết hợp vào vòng lặp.

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

Answer 3

Tôi nghĩ bạn muốn một đối tượng. Chỉ cần xác định các khóa có tên của các yếu tố của bạn để phù hợp, và chức năng như các giá trị. ví dụ.

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

Sau đó, bạn chỉ có thể gọi một trong những bạn muốn với

switchObj[target]();

Cấp: giải pháp này là tốt hơn nếu bạn cần phải làm những việc một cách rõ ràng khác nhau với mỗi phần tử, và không giống như những câu trả lời khác nó tập trung vào chủ đề rõ ràng của câu hỏi, thay vì những gì OP đang cố gắng thực hiện với cấu trúc dữ liệu đã nói.

Answer 4

Có lẽ bạn đang tìm kiếm cho một cái gì đó như thế này? Điền vào số myArray với các yếu tố bạn đang sử dụng.

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

ở đây bạn không cần phải liệt kê rõ ràng tất cả các trường hợp, chỉ cần để mảng xác định chúng. hãy chắc chắn rằng, mục tiêu đó tồn tại trong mảng, nếu không bạn sẽ cần một câu lệnh if.

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