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

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 值的数组，而不仅仅是一个字符串？

此外，如果您在我的代码中看到 'not very clear'、'just horribly bad' 的内容，或者认为有更好的方法，我很乐意听取您的意见！

Answer 1

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

     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;
      var newGallery = alert(eval( thisRoom) );
      });
      }

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

但是请记住eval is evil所以要小心使用它。

Answer 2

像这样将所有数组存储在一个对象中：

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

然后使用您生成的密钥访问您想要的数组，如下所示：

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

Answer 3

window 是一个包含文档中声明的所有变量的对象。

因此，如果您声明一个变量 var room1，window 中将有一个属性，键为 room1，其值为 room1 变量的值（即 room1 values the same as window["room1"]).

也就是说，你可以像这样用window[thisRoom]访问room1变量的内容：

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

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

How to call a variable when its name is equal to a string?

javascript

arrays

variables

photoswipe