使用級聯命名空間

在下面的演示中，點擊無序列表（#Foo或#Biz）中的一個應附加從相應的數組包含文本3 li的，無論是arrayFoo或arrayBiz動態指JS陣列。儘管我在動態引用正確的數組時遇到了問題，但我想避免在實際項目中使用冗長的if/else語句集，其中可能有5到30個元素/數組。使用級聯命名空間

Fiddle

我想通過建立像這樣listArray = (array + listName)命名空間動態選擇陣列，但不起作用。有什麼辦法連接一個原始的變量名，即使它不像那個語法那麼簡潔？

理想情況下，我想保留數組原樣，我不想將它們組合成更大的數組陣列，或將它們轉換成字典，但如果這是唯一的解決方案，我肯定會接受它。

<ul id="Foo">Foo</ul> 
<ul id="Biz">Biz</ul>

arrayFoo = [ 
    "first foo item", 
    "second foo item", 
    "third foo item"]; 

arrayBiz = [ 
    "first biz item", 
    "second biz item", 
    "third biz item"]; 

$('ul').click(function() { 
    listName = $(this).attr('id'); 

    // hardcoding this var so demo works...  
    listArray = arrayBiz; 
    // I want to set listArray equal to (array + listName) 
    // but I'm not sure how. When working correctly, 
    // clicking #Foo should append the arrayFoo items, 
    // and clicking #Biz should append arrayBiz items. 

    listArray.forEach(function (listItem) { 
     $('#' + listName).append('<li>' + listItem + '</li>'); 
    }); 
});

來源

2015-04-21 Dpeif

https://jsfiddle.net/m841o7ys/6/ 不過我建議你incapsulate你的數據給對象。請參閱@ RoryMcCrossan的答案... –

如果你修改你的數組包含一個對象，你可以通過使用括號標記一個字符串變量訪問它們之內。事情是這樣的：

var data = { 
    Foo: [ 
     "first foo item", 
     "second foo item", 
     "third foo item" 
    ], 
    Biz: [ 
     "first biz item", 
     "second biz item", 
     "third biz item" 
    ] 
} 

$('ul').click(function() { 
    var $ul = $(this); 
    data[this.id].forEach(function (listItem) { 
     $ul.append('<li>' + listItem + '</li>'); 
    }); 
});

Updated fiddle

來源

2015-04-21 08:26:10

我想嘗試避免將數組包裝到一個對象中，這就是我想要保留它的原因（儘管我確實同意你的看法，並且已經看到了這一點解決方案）。如果你不能這樣做，例如數組分散在多個文件中，但仍然可以通過.click（）函數訪問，這仍然可行嗎？ – Dpeif

當然。如果數組分佈在多個文件中，則可以通過使用'$ .extend（）'組合它們來使用此模式。 –

'$ .extend（）'是缺失的部分，這對於我所需要的是完美的。非常感激。 – Dpeif

做的骯髒的方式是通過窗口元素訪問。

var a = "Foo"; 
window["array" + a];

但我建議不要這樣做，正確的方法是將數組填充到對象中並使用鍵值獲取它。

來源

2015-04-21 08:31:34 JuniorDev

只有在全局（'window'）範圍內纔有效 –

你可以嘗試這樣的，但它是一些什麼樣的@Rory實現：

var arrayFoo = [ 
 
    "first foo item", 
 
    "second foo item", 
 
    "third foo item"]; 
 

 
var arrayBiz = [ 
 
    "first biz item", 
 
    "second biz item", 
 
    "third biz item"]; 
 
var arr=[]; 
 
arr['arrayFoo']=arrayFoo; 
 
arr['arrayBiz']=arrayBiz; 
 
$('ul').click(function() { 
 
    listName = $(this).attr('id'); 
 
    listArray = "array"+listName;// it will not refer to the declared array.it will be merely a string so can be used as key. 
 
console.log(listArray); 
 
    arr[listArray].forEach(function (listItem) { 
 
     $('#' + listName).append('<li>' + listItem + '</li>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
    <ul id="Foo">Foo</ul> 
 
<ul id="Biz">Biz</ul>

來源

2015-04-21 08:41:11

使用級聯命名空間

回答

相關問題