Question

这可能非常简单，但出于某种原因，我的大脑并没有理解这一点。

我正在制作Tic-Tac-Toe / Hollywood Squares游戏，并且所有方形变量都设置为null square0Value =“”; square1Value =“”; 等

当你点击其中一个方块时，它会启动一个带有方形特写和两个按钮X和O的引导模态，并将所有数据从网格方块传递到模态中，这样我只需要一个模态标记块。

当你单击X或O时，我需要它动态设置方形变量，它与模态关联到X或O，一旦模态关闭，另一个javascript函数检查所有变量以查看是否有一个3连续的出现，并显示一个控制台.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>

JS： 我有一个构建的数组，用名人/个性填充每个方块，并且一个用于洗牌阵列的document.ready函数填充方块：

$(document).ready(function(){
    shuffle(squares);
    for (i = 0; i < 9; i++) { 
        $("#square"+i).find('.squareButton').addClass(squares[i][0]);
        $("#square"+i).find('.squareButton').data("square", squares[i][0]);
        *// the [0] block of the array is a class filler*
        $("#square"+i).find('.squareButton').data("nameplate", squares[i][1]);
        *// the [1] block of the array is the celebrity's name*
        $("#square"+i).find('.nameplate').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 squareId = "";

    $('#squareModal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget);
      squareClass = button.data('square');
      squareName = button.data('nameplate');
      squareXO = button.data('xo');
      squareId = button.data('id');
      console.log(squareId);

      var modal = $(this)
      modal.find('.modal-body').addClass(squareClass);
      modal.find('.modal-body .nameplate').html(squareName);
      modal.find('.modal-body .xo').html(squareXO);
    })

    $('#squareModal').on('hidden.bs.modal', function (event) {
        var modal = $(this);
        modal.find('.modal-body').removeClass(squareClass);
        checkWin();
    });

    function clickX(){
        $(eval(squareId+'Value')).val("X");
        $(eval(squareId)).addClass('selected');
        $(eval(squareId)).find(".squareButton").data("xo", "X");
        $(eval(squareId)).find(".xo").html("X");
    }

    function clickO(){
        $(eval(squareId)).addClass('selected');
        $(eval(squareId+'Value')).val("O");
        $(eval(squareId)).find(".squareButton").data("xo", "O");
        $(eval(squareId)).find(".xo").html("O");
    }

    $("#modalX").on("click", function(e){
        e.preventDefault();
        clickX();
    });

    $("#modalO").on("click", function(e){
        e.preventDefault();
        clickO();
    });

function checkWin() {
    for (i = 0; i < 9; i++) { 
        console.log("Square"+i+": " + eval('square'+[i]+'Value'));
    }

    checkWinX();
    checkWinO();
    if (square0Value != "" && square1Value != "" && square2Value != "" && square3Value != "" && square4Value != "" && square5Value != "" && square6Value != "" && square7Value != "" && square8Value != ""){
        checkBoardFull();
    }
}

问题出在clickX（）和clickO（）函数中，我试图将（eval（squareId +'Value'））的值设置为所需的X或O值。我想让它尽可能动态，所以不必为每个模态编写一个函数。

提前谢谢。

Answer 1

不确定您使用eval的原因。

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

可能就够了

Answer 2

这是我的建议。

def new_record(role_type)
  if role_type == 'RoleA'
    #do something
  elsif role_type == 'RoleB'
    #do something
  end 
end

def updated_record(role_type)
  if role_type == 'RoleA'
    #do something
  elsif role_type == 'RoleB'
    #do something
  end
end 

acceptable_record_types = ['New','Updated']
public_send("#{record_type.downcase}_record",role_type) if acceptable_record_types.include?(record_type)

如果我正在读这个，那就是点击的按钮导致模态显示。如果是这种情况，那么我认为这是一个很远的假设，一次只能显示一个模态。如果这是真的，那么你可以做的是使该变量的范围更高，而不是在那个处理程序中。

这对你有什么用？好吧，如果你这样做，那么你可以在clickX中使用该元素并单击Y.例如......

#do something

我不清楚其他人正在引用什么，但是如果你有按钮，那么你有权查找它的嵌套子项或查找父元素，如果你需要找到它们。

Answer 3

所以是的......将我的全球Square Square重建为数组是一种更简单的组织方式......对不起大家。

设置一个动态变量？

3 个答案: