每次点击以DRY方式将相同表单的值分配给多个js对象

debugcn 发表于 Dev

nwimmer123

我正在做打字游戏。最多4位玩家可以玩游戏。这是html。

<!-- Avatar Select -->
<div class="select container col-sm-6" id="avatar">
  <h4 id="playerSelector">Player 1</h4>
  <h4>Please enter your name.</h4>
  <div class="input-group">
    <input type="text" class="form-control" id="playerName">
  </div>
  <button class="btn" id="submitPlayer">Submit</button>

</div>

我要保存每个人的姓名，并最终保存每个玩家对象的化身和分数。我以为下面的功能可以做到这一点。但这是行不通的。

$(document).ready(function(){

  //define players
  var player1 = {
    name: "player 1",
    avatar: "",
    score: 0,
  }
  var player2 = {
    name: "player 2",
    avatar: "",
    score: 0,
  }

...还有2个，但我跳过了

  //submit player info button
  var playerNum = 1;
  var tempPlayer = "";
  $("#submitPlayer").on("click", function () {
    tempPlayer = "player" + playerNum;
    tempPlayer.name = $("#playerName").val();
    playerNum += 1;
    if (playerNum > numPlayers) {
      $("#avatar").hide();
      $("#instructions").show();
    } else {
      return
    }
  });

});

当我在控制台上登录时，tempPlayer看起来正确，它与变量player1相同，但是当我尝试将其设置为输入框的值时，它不会接受。我假设这是因为它正在寻找名称tempPlayer而不是player1的对象，即使在这一点上tempPlayer是同一字符串player1。这是真的？如果是这样，又有什么方法可以实现相同的动作而不必为每个玩家编写函数呢？

snit80

您需要使用JSON对象来实现此目的，并且您的代码将如下所示

var jsonArr = [];
 $("#submitPlayer").on("click", function () {
jsonArr.push({
    name: $("#playerName").val();,
    avatar: '',
    ... //other values
});
});

您将需要对其进行调整，以便它只能运行4次，并且类似的事情。您的上述方法不起作用的主要原因是因为无法连接字符串以在JS中创建预定义的变量。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。