如何用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

您調用的函數，你聲明之前。嘗試更改其位置。