Question

我的项目包含一个充满对象的数组。每个对象都有一个名为“on”的属性，该属性为true或false。以前我的代码如下（并且有效。）

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，那么这将最有效。

＆＃13;

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(""));
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: