javascript - Ruby on Rails 和 Jquery : trying to switch characters after submit

Question

第一次发帖在这里，所以如果有些地方不对(我如何输入代码，如果我没有包含足够的，或者如果我的问题太含糊)，我深表歉意。

我对 RoR 非常非常陌生，我正从构建一个井字游戏开始。我已经将它构建为在命令行上工作，现在我正在尝试使其基于 Web。我有一个可点击的面板，其中会弹出 X 和 O 图像。这与下面的表格相关联(一旦一切正常，我将使其不可见)注册哪个玩家点击了哪个位置。

目前，我遇到了在提交页面后尝试切换播放器的问题。我正在使用 jQuery 进行点击。单击时每个空格都会弹出为“X”，我只是想不通在提交后如何将播放器更改为“O”。我应该通过 jQuery 还是 Ruby 来做到这一点？而且，我该怎么做？

澄清一下，我意识到我的代码可能不是最干净的，但目前我更担心功能，稍后会使其更美观。

jQuery:

$(document).ready(function(){

  $(".square").click(function(){
    //   Gather the position that was clicked
    var number = $(this).data("position");
    // Locate the game form
    var form = $("form");
    // Locate the input field corresponding to that position
    var input = $("input[data-position='" + number + "']");
    // Set the value of that input field to "X" or "O"
    input.val("X");
    // Submit the form
    form.submit();
  });
});

ruby :

def create
  @game = Game.new(game_params)
  @game.save

  redirect_to @game
end

def update
  @game = Game.find(params[:id])
  @game.update(game_params)
  redirect_to @game
end

def show
  @game = Game.find(params[:id])
end

private
def game_params
  params.require(:game).permit(:player_1, :player_2, moves_attributes: [:player, :id])
end

HTML 格式:

<%= nested_form_for @game do |f| %>

  <%= f.fields_for :moves do |move_form| %>
    <p>
      <%= move_form.label :position %><br>
      <%= move_form.text_field :player, data: {position: move_form.object.position} %>
      <%= move_form.hidden_field :id %>
    </p>
  <% end %>

<input type="Submit">
<% end %>

HTML 游戏板:

<div id="board" align = center>
  <table>
    <tr>
      <td data-position="0" class="square <%= class_for_move(0)%>"></td>

棋盘上的 9 个方格中的每一个都相同。

以下链接到下一个拦截器:jQuery .click function is not working without a string

Answer 1

您将需要在表单提交之间的某处保持当前播放器状态。

有多种方法可以做到这一点。一种方法(可能不是最好的方法)是将当前玩家存储在 session 哈希中，并在每次提交表单时对其进行设置。类似于(在 game_controller.rb 中):

def switch_player
session[:current_player] = session[:current_player] == 'X' ? 'O' : 'X'
end

调用电话switch_player在您的表单末尾在 Controller 中提交操作

然后只需将它添加到您的面板(现在是一个 <p> 标签，可能应该是一个 div )，例如:

<p id="board" data-current-player: <%=session[:current_player] %> >
  <%= move_form.label :position %><br>
  <%= move_form.text_field :player, data: {position: move_form.object.position} %>
  <%= move_form.hidden_field :id %>
</p>

然后你可以用 jQuery 把它拉出来:

   $(document).ready(function(){

var currentPlayer = $(#board).data("current-player");

      $(".square").click(function(){
        //   Gather the position that was clicked
        var number = $(this).data("position");
        // Locate the game form
        var form = $("form");
        // Locate the input field corresponding to that position
        var input = $("input[data-position='" + number + "']");
        // Set the value of that input field to "X" or "O"
        input.val(currentPlayer);
        // Submit the form
        form.submit();
      });
    });

顺便说一句，您似乎在练习 Rails，利用 CRUD、REST 和表单更新等。这最适用于数据密集型应用程序，其中模型代表数据库中的某个表，您使用表单来操作模型，从而操作数据库。我提出这个问题是因为井字游戏可能不是了解基本 Rails 功能的最佳领域。待办事项列表之类的东西可能更合适。

如果我能给你更多主动提出的建议，我会建议使用像 Sinatra 这样的东西。 Tic-tac-toe 并不真正需要数据库后端，Sinatra 会让您很好地接触路由、模板、处理 URL，而无需 Rails 的开销。您可以将其视为 Rails lite。当你开始使用 Rails 时，你在那里学到的很多东西都会转移过来。