如何用Javascript打开模式？

Question

我是学习学习代码的学生，刚刚开始学习javascript/jquery。我创建了一个RoR国际象棋游戏，目前正在进行promotion移动。基本上，一旦典当棋子到达棋盘的另一端，应该打开一个模式并给玩家选择一些棋子来替换棋子。在前端，我有这种模式，当一个棋子满足必要的条件时，它应该被自动触发。我创建了一个函数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

我设法自己找到解决方案。主要问题是我如何定义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> 

现在的模式打开时的一枚棋子件是在要晋升的职位。

Answer 2

您调用的函数，你声明之前。尝试更改其位置。