Question

我是一名学习代码的学生，刚开始学习javascript / jquery。我创建了一个RoR国际象棋游戏，目前正在进行promotion移动。基本上，一旦Pawn棋子到达棋盘的另一端，就应该打开一个模态并给玩家一些可供选择的棋子来替换棋子。在前端，我有这个模态，当一个pawn满足必要的条件时，它会被自动触发。我创建了一个应该这样做的函数is_pawn_promotion，但是模态仍然没有自己打开，现在我不确定接下来要做什么。我想知道is_pawn_promotion函数是否被正确调用（显然不是）。我试图重新组织openModal函数的位置，但无济于事。任何帮助将不胜感激，希望我已经提供了一个清晰的图片，说明发生了什么。

这是包含is_pawn_promotion的JS文件。我已经包含了整个文件，其中包含我要调用的openModal函数以打开模态。

$( function() {
  $( ".piece" ).draggable({
    snap: ".piece-square",
    grid: [60, 60],
    containment: ".game-board",
  });


  $( ".piece-square" ).droppable({
    accept: ".piece",
    drop: function( event, ui ) {
      var x = $(event.target).data('x');
      var y = $(event.target).data('y');
      var urlUpdatePath = $('.ui-draggable-dragging').data('url');
      var is_pawn_promotion = function() {
        return $(".piece") === 'Pawn' &&
          (y === 0 || y === 7); 
      };

      var sendAJAXRequest = function(x, y, type) {
        $.ajax({
          type: 'PUT',
          url: urlUpdatePath,
          data: { piece: { x_position: x, y_position: y, piece_type: type} },
          success: function(response) {
            if(response == 'OK') {
              console.log(response);
            } else {
              alert(response);
            }
          }
        });
      };

          if (is_pawn_promotion()) {
            openModal();
            var promoSubmitButton = $(".promo-selection-submit");
            promoSubmitButton.on('click', function() {
              var type = $('.promo-selection.input[selected]').val();
              sendAJAXRequest(x, y, type);
              });
            } else { 
              sendAJAXRequest(x, y);
            }
          }
        });
    });

    var openModal = function() {

      // Change modal-state checkbox to checked
      $("#promo-modal").prop("checked", true);

        if ($("#promo-modal").is(":checked")) {
          $("body").addClass("modal-open");
        } else {
          $("body").removeClass("modal-open");
        }

      $(".modal-fade-screen, .modal-close").on("click", function() {
        $(".modal-state:checked").prop("checked", false).change();
      });

      $(".modal-inner").on("click", function(e) {
        e.stopPropagation();
      });
    };

模态

<div class="modal">
  <input class="modal-state" id="promo-modal" type="checkbox" />
  <div class="modal-fade-screen">
    <div class="modal-inner">
      <div class="modal-close" for="promo-modal"></div>
        <div class="promo-modal-text">
          <h1>Pawn Promotion!</h1>
          <h1>Make your selection: </h1>
        </div>
        <form action="#" class="pawn-promotion">
          <div class="promo-selection-container">
            <% [Queen, Knight, Bishop, Rook].each do |piece_type| %>
              <div class="promo-selection">
                <label>
                  <%= image_tag(piece_type.new(color: current_color).piece_image) %>
                  <%= piece_type.name %>
                  <input type="radio" name="promo-piece" value="<%= piece_type.name %>">
                </label>
              </div>
            <% end %>  
          </div>
          <br/>
          <div class="promo-selection-submit">
            <input type="submit">
          </div>
        </form>
    </div>
  </div>
</div>

Answer 1

在声明之前，您正在调用该函数。尝试更改其位置。

Answer 2

我设法找到了自己的解决方案。主要问题是我如何定义is_pawn_promotion函数。我将其更改为以下内容：

var is_pawn_promotion = function() {
  return ui.draggable.data('pieceType') === 'Pawn' &&
    (y === 0 || y === 7); 
};

我还必须将data-piece-type属性添加到视图中的实际部分，如下所示：

<div class="piece" data-url="<%= game_piece_path(piece.game, piece)%>" data-piece-type="<%= piece.piece_type %>">
  <%= image_tag(piece.piece_image) %>
</div>

现在，当一个棋子处于一个待晋升的位置时，该模态会打开。

如何用Javascript打开模态？

2 个答案: