Установить динамическую переменную?

Это может быть очень просто, но мой мозг почему-то не понимает этого.

Я делаю игру Tic-Tac-Toe/Hollywood Squares, и все квадратные переменные имеют значение null square0Value = ""; square1Value = ""; и т.п.

Когда вы щелкаете по одному из квадратов, он запускает загрузочный модал с крупным планом квадрата и двумя кнопками, X и O, и передает все данные из квадрата сетки в модал, так что мне нужна только одна модальная разметка блок.

Когда вы нажимаете X или O, мне нужно, чтобы он динамически устанавливал квадратную переменную, которая связана с модальным значением либо X, либо O, как только модальное окно закрыто, другая функция javascript проверяет все переменные, чтобы увидеть, есть ли 3. -in-a-row и отображает файл 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>

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, которое необходимо. Я хочу сделать это как можно более динамичным, поэтому не нужно писать функцию для каждого модального режима.

Заранее спасибо.

Источник

3 ответа

Так что да... преобразование моих глобальных квадратных значений в массив было НАМНОГО более простым способом организации вещей... извините всех.

Источник

Не уверен, почему вы используете eval,

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

Может быть достаточно

Источник

Вот мое предложение.

var button = $(event.relatedTarget);

Если я читаю это правильно, то это кнопка, по которой была нажата кнопка модального показа. Если это так, то я полагаю, что это далеко не одно предположение, что только один мод может показывать одновременно. Если это так, то вы можете сделать эту переменную выше, а не в пределах этого обработчика.

Что это делает для вас? Что ж, если вы сделаете это, тогда вы можете использовать этот элемент в вашем clickX и clickY. Например...

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

Мне неясно, на что ссылаются другие, но если у вас есть кнопка, у вас есть доступ к поиску вложенных дочерних элементов или к поиску родительских элементов, если вам нужно их найти.

Источник
Другие вопросы по тегам