Javascript 设置一个动态变量？

这可能是非常简单的，但我的大脑只是因为某种原因没有领会到这一点

我正在做一个Tic-Tac-Toe/好莱坞方块游戏，所有方块变量都设置为空 square0Value=“”； square1Value=“”； 等等

当您单击其中一个方块时，它会启动一个引导模式，带有方块特写和两个按钮X和O，并将所有数据从网格方块传递到模式中，因此我只需要一个模式标记块

当您单击X或O时，我需要它动态地将与模式相关联的平方变量设置为X或O，一旦模式关闭，另一个javascript函数将检查所有变量，以查看是否有一个连续3次出现，并显示一个console.log，表明X或O赢得了比赛。但是我写的不对，没有设置任何平方变量

这是我的密码：

HTML:

<button class="squareButton" data-toggle="modal" data-target="#squareModal" data-square="" data-nameplate="" data-xo="" data-id="square0">
     <div class="xo"></div>
     <div class="nameplate"></div>
     <div class="desk"></div>
</button>

（我已经复制了9次。）

[模式标记]

<div class="modal fade-scale" id="squareModal" tabindex="-1" role="dialog" aria-labelledby="squareModal">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="square">
            <div class="squareModal">
                <div class="xo"></div>
                <div class="nameplate"></div>
                <div class="desk"></div>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" id="modalX" class="btn btn-default btn-xo" data-dismiss="modal">X</button>
        <button type="button" id="modalO" class="btn btn-default btn-xo" data-dismiss="modal">O</button>
      </div>
    </div>
  </div>
</div>

X
O

JS: 我构建了一个数组，用名人/个性填充每个方块，还有一个document.ready函数，用于洗牌数组填充方块：

$（文档）.ready（函数（）{
洗牌（方块）；
对于（i=0；i<9；i++）{
$（“#square”+i）.find（'.squareButton'）.addClass（squares[i][0]）；
$（“#square”+i）.find（“.squareButton”）.data（“square”，squares[i][0]）；
*//数组的[0]块是类填充符*
$（“#square”+i）.find（“.squareButton”）.data（“铭牌”，squares[i][1]）；
*//数组的[1]块是名人的名字*
$（“#square”+i）.find（'.displate'）.html（squares[i][1]）；
}
});
var square0Value=“”；
var square1Value=“”；
var square2Value=“”；
var square3Value=“”；
var square4Value=“”；
var square5Value=“”；
var square6Value=“”；
var square7Value=“”；
var square8Value=“”；
var squareClass=“”；
var squareName=“”；
var squareXO=“”；
var平方=”；
$（'#squaredmodal'）.on（'show.bs.modal'，函数（事件）{
var按钮=$（event.relatedTarget）；
squareClass=按钮数据（'square'）；
squareName=按钮数据（“铭牌”）；
squareXO=按钮数据（'xo'）；
squared=按钮数据（'id'）；
控制台日志（平方）；
var modal=$（此）
modal.find（'.modal body'）.addClass（squareClass）；
modal.find（'.modal body.displate'）.html（squareName）；
modal.find（'.modal body.xo'）.html（squareXO）；
})
$（'#squaredmodal'）.on（'hidden.bs.modal'，函数（事件）{
var modal=$（本）；
modal.find（'.modal body'）.removeClass（squareClass）；
checkWin（）；
});
函数clickX（）{
$（eval（squared+Value'））.val（“X”）；
$（eval（squared））.addClass（'selected'）；
$（eval（squared））.find（“.squareButton”）.data（“xo”，“X”）；
$（eval（squared））.find（“.xo”）.html（“X”）；
}
函数clickO（）{
$（eval（squared））.addClass（'selected'）；
$（eval（squared+'Value'））.val（“O”）；
$（eval（squared））.find（“.squareButton”）.data（“xo”，“O”）；
$（eval（squared））.find（“.xo”）.html（“O”）；
}
$（“#modalX”）。在（“单击”，函数（e）{
e、 预防默认值（）；
clickX（）；
});
$（“#modalO”）。在（“单击”，函数（e）{
e、 预防默认值（）；
clickO（）；
});
函数checkWin（）{
对于（i=0；i<9；i++）{
log（“Square”+i+”：“+eval（'Square'+[i]+'Value'））；
}
checkWinX（）；
checkWinO（）；
如果（square0Value！=“”&square1Value！=“”&square2Value！=“”&square3Value！=“”&square4Value！=“”&square5Value！=“”&square6Value！=“”&square7Value！=“”&square8Value！=“”）{
checkBoardFull（）；
}
}

---

问题在于clickX（）和clickO（）函数，我试图将（eval（squared+'value'）的值设置为所需的X或O值。我想使它尽可能动态，这样就不必为每个模态编写函数

不确定为什么要使用

eval

$("#"+squareId).addClass()

---

可能足够了，我的建议如下

var button = $(event.relatedTarget);

如果我读的是正确的，那就是点击的按钮，导致模态显示。如果是这样的话，那么我相信这是一个遥远的假设，即一次只能显示一个模态。如果这是真的，那么您可以做的是使变量的作用域更高，而不是在该处理程序中

这对你有什么好处？如果你这样做了，那么你可以在你的clickX和clickY中使用这个元素。例如

    function clickX(){
        button.data('xo', 'X');
        button.find('.xo').html('X');
    }

---

我不清楚其他人在引用什么，但是如果你有按钮，那么你就可以找到它的嵌套子元素或者寻找父元素，如果你需要的话。

所以是的。。。将我的全局平方值重建为数组是一种更简单的组织方式。。。对不起，各位。

我认为show.bs.modal处理程序中的

var按钮

是否单击了方形？编辑：附带问题，为什么要在clickX和clickO中执行eval（）？我建议您阅读。只要你开始用变量名进行编号，这就表明你应该使用数组。您不需要“动态变量”，只需找出正确的数组索引即可。去重构。变量'squared'的值加上单词'value'组成全局声明的变量名。我也不想添加一个类。这是一个场景：假设您单击square 0，会弹出模式，并且square 0的所有数据都加载到模式中，当您单击X或O时，我希望该值（X或O）被放入开始时声明的square0Value中，如本期所示。@Murphy1976而不是使用eval（）来获取

    function clickX(){
        button.data('xo', 'X');
        button.find('.xo').html('X');
    }