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"*/],
    //...
};

然后使用您生成的密钥访问所需的数组：

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 2

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 3

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

因此，如果您声明变量var room1，则window中的属性将为room1，其值为room1变量的值（即{ {1}}）。

也就是说，您可以使用room1 values the same as window["room1"]访问room1变量的内容，如下所示：

window[thisRoom]

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

3 个答案: