javascript - JS通过变量引用数组元素值？

Question

我的项目包括一个充满对象的数组。每个对象都有一个名为“on”的属性，该属性要么为真，要么为假。以前我的代码如下(并且它有效。)

HTML

<li><div class='square' id='square_1_1'></div></li>
<li><div class='square' id='square_1_2'></div></li>
<li><div class='square' id='square_1_3'></div></li>

JS

//creates the Square object
function Square(x,y, sound, on) {
    this.x = x,
    this.y = y,
    this.sound = sound, 
    this.on = false
};

//made some squares
var square_1_1 = new Square(1, 1, sound36);
var square_1_2 = new Square(1, 2, sound35);
var square_1_3 = new Square(1, 3, sound34);
...


$('.square').click(function() {
    $(this).toggleClass('on'); // Just toggles the css
    var currentId = $(this).attr("id");
    window[currentId].on = !(window[currentId].on)

});

上面的代码做了以下事情:单击 div 时，ID 会存储到变量中。找到与变量同名的 JS 对象，然后将其 'on' 属性设置为 true 或 false。

我想重写一些东西，所以我清理了 DOM。我还想重用此代码，这样我就可以拥有多个页面。现在我的代码如下所示:

HTML

<li><div class='square' id='page1Buttons[0]'></div></li>
<li><div class='square' id='page1Buttons[1]'></div></li>
<li><div class='square' id='page1Buttons[2]'></div></li>

JS

//SAME AS BEFORE
// creates the Button object
function Button(x,y, sound, on) {
    this.x = x,
    this.y = y,
    this.sound = sound, 
    this.on = false
};

//use a loop function to create the Square objects. Put all objects in an array
var page1Buttons = [];
var fillPage1Buttons = function (){
    //fill a column of buttons
        var rows = 1;
        for(rows; rows <= 36; rows += 1) {
        var i = 0;
        for(i; i <= 35; i ++) {
            page1Buttons[page1Buttons.length] = new Button(rows, i + 1, bellsArray[i]);
        }
        }
}();



// This is the part that is not working
var currentId;
var currentObject;
$('.square').click(function() {
    $(this).toggleClass('on');
    currentId = $(this).attr("id");
    window[currentId].on = !(window[currentId].on);
});

如果我使用 JS 控制台并输入:

page1Buttons[0].on = !page1Buttons[0].on;

我可以更改属性。我不明白的部分是:

window[currentId].on = !(window[currentId].on);

我尝试了一些方法，但要么得到一个字符串，要么得到未定义的结果。

Answer 1

我会完全停止使用全局变量，因此完全停止使用window，因为您已经迈出了第一步。

相反，我会将索引作为数据属性存储到 pageButtons 数组中(尽管如果您愿意，您仍然可以使用 id):

<li><div class='square' data-id='0'></div></li>
<li><div class='square' data-id='1'></div></li>
<li><div class='square' data-id='2'></div></li>

然后:

$('.square').click(function() {
    $(this).toggleClass('on');
    currentId = $(this).attr("data-id");
    pageButtons[currentId].on = !pageButtons[currentId].on; // No need for the ()
});

<小时/>

或者，您可以使用 jQuery 漂亮的 data 函数将您的 Square 实例直接连接到元素。如果您也动态创建 div，效果最好。

function Button(x,y, sound, on) {
    this.x = x,
    this.y = y,
    this.sound = sound, 
    this.on = false
}
var n, li, btn;
var list = $("#the-list");
var display = $("#display");
var pageButtons = [];
for (n = 0; n < 10; ++n) {
  li = $('<li><div class="square"></div></li>');
  btn = new Button(0, n, 'whatever', false);
  li.find('div').data('btn', btn);
  list.append(li);
  pageButtons.push(btn);
}
$(".square").on("click", function() {
  var $this = $(this);
  $this.toggleClass('on');
  $this.data('btn').on = $this.hasClass('on');
  // Show that the buttons are updated
  display.html(pageButtons.map(function(btn, i) {
    return "<div>#" + i + " is " + (btn.on ? "on" : "off") + "</div>";
  }).join(""));
});

.square {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #ddd;
}
.on {
  background-color: green;
}
#the-list {
  float: left;
  width: 30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="the-list"></ul>
<div id="display"></div>