javascript - 当变量名称等于字符串时如何调用变量？

Question

所以我们这里有一些 HTML:

  <div class="button galleryButton" number="1">Gallery</div>
  <div class="button galleryButton" number="2">Gallery</div>

还有两个数组:

      var room1 = [
        {
          src: './includes/imgs/Hotel/tea.JPG',
          w: 700, // Those are just width and height 
          h: 300 //
        },
        {
          src: './includes/imgs/Hotel/00039850.JPG',
          w: 600,
          h: 400
        }
      ];

      var room2 = [
        {
          src: './includes/imgs/Hotel/somethingElse.JPG',
          w: 700,
          h: 300
        },
        {
          src: './includes/imgs/Hotel/00039840.JPG',
          w: 600, 
          h: 400 
        }
      ];

我们选择这些按钮

var roomCounter = document.getElementsByClassName('galleryButton');

我们循环遍历它们，以便我们可以将选定的房间号保存在变量中

for (var i = 0; i < roomCounter.length; i++) {
  roomCounter[i].addEventListener("click", function(){
      var roomNumber = this.getAttribute("number");
      var thisRoom = 'room'+roomNumber;

假设我们单击第一个按钮:
thisRoom 现在存储“room1”字符串
(PhotoSwipe 是一个很酷的 javascript 画廊，“thisRoom”应该是一个图像数组才能使其工作。)但来了:

var newGallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, thisRoom, options);

它不会工作，因为它需要一个简单的字符串“room1”而不是变量中保存的数组。

如何让 newGallery 知道我希望它采用一个等于 thisRoom 值的数组，而不仅仅是一个字符串？

而且，如果您在我的代码中发现“不太清楚”、“非常糟糕”的内容，或者认为有更好的方法，我很乐意听到!

Answer 1

将所有数组存储在一个对象中，如下所示:

var myArrays = {
    "room1": [/*define array for "room1"*/],
    "room2": [/*define array for "room2"*/],
    //...
};

然后使用您生成的 key 访问您想要的数组，如下所示:

var thisRoom = 'room'+roomNumber; // generate the key
myArrays[thisRoom]; // access the according array from myArrays.

以及如何调用PhotoSwipe:

var newGallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, myArrays[thisRoom], options);