Question

我正在尝试使用jQuery为在线角色创建者应用构建用户界面。我试图通过一键点击随机生成角色统计。这是我第一次在一个非平凡的应用程序中使用jQuery。

问题在于，当我单击按钮时，不会在表单内生成数字。如果我删除了已禁用的属性，它仍然无法正常工作，所以我知道这不是问题所在。

如果我要抓住它，我猜jQuery中的$（）并不喜欢接受变量，但如果是这样的话，我不知道如何正确地做到这一点将会。只需点击一下jQuery网站即可填写多个表单的示例对此无用，因为我需要确保单独调用dice函数来填充每个表单。

我的javascript代码如下所示：

$(document).ready(function(){

    //stats as an array
    stats = ["#smarts", "#rwp", "#driving", "#cool", "#bod", "#luck", "#looks", "#bonk"];

    //roll dice function
    function dice (x, n, y) {
        var result = 0;
        for(i = 0; i < x; i++) {
            result = result + Math.floor((Math.random() * n) + 1);
        }
        result = result + y;
        return result;
    }

    //roll each stat function
    function rollStats(stats) { 
        for(stat in stats) {
            $(stat).val(dice(1, 6, 0));
        }
    }

    //on button click roll each stat
    $("#stats").click(rollStats(stats));

});

作为参考，我的html表单的相关部分如下所示：

  <form class="create-teenager">
      Smarts:
      <input type="number" name="smarts" id="smarts" disabled />
      <br/><br/>

      Relationship with Parents:
      <input type="number" name="rwp" id="rwp" disabled />
      <br/><br/>

      Driving:
      <input type="number" name="driving" id="driving" disabled />
      <br/><br/>

      Cool:
      <input type="number" name="cool" id="cool" disabled />
      <br/><br/>

      Bod:
      <input type="number" name="bod" id="bod" disabled />
      <br/><br/>

      Luck:
      <input type="number" name="luck" id="luck" disabled />
      <br/><br/>

      Looks:
      <input type="number" name="looks" id="looks" disabled />
      <br/><br/>

      Bonk:
      <input type="number" name="bonk" id="bonk" disabled />
      <br/><br/>

      <button id="stats">Roll Stats</button>
  </form>

Answer 1

你错误地使用它需要：

for(stat in stats) {
    $(stats[stat]).val(dice(1, 6, 0));
}

Answer 2

首先，我建议您从表单中拉出按钮或防止默认。

试试这个fiddle。

<form class="create-teenager">
  Smarts:
  <input type="number" name="smarts" id="smarts" disabled />
  <br/><br/>

  Relationship with Parents:
  <input type="number" name="rwp" id="rwp" disabled />
  <br/><br/>

  Driving:
  <input type="text" name="driving" id="driving" />
  <br/><br/>

  Cool:
  <input type="number" name="cool" id="cool"  />
  <br/><br/>

  Bod:
  <input type="number" name="bod" id="bod" disabled />
  <br/><br/>

  Luck:
  <input type="number" name="luck" id="luck" disabled />
  <br/><br/>

  Looks:
  <input type="number" name="looks" id="looks" disabled />
  <br/><br/>

  Bonk:
  <input type="number" name="bonk" id="bonk" disabled />
  <br/><br/>

滚动统计

试试这个脚本

$(document).ready(function(){

  //stats as an array
  stats = ["#smarts", "#rwp", "#driving", "#cool", "#bod", "#luck", "#looks", "#bonk"];

  //roll dice function
  function dice (x, n, y) {
      var resultNumber = 0;
      for(i = 0; i < x; i++) {
          resultNumber = Math.floor((Math.random() * n) + 1) + y;
      }
      console.log(resultNumber);
      return resultNumber;
  }

  //on button click roll each stat
  $("#stats").click(function() { 
    for(stat in stats) {
        $(stats[stat]).val(dice(1, 6, 0));
    }
  });
});

在一个按钮单击中使用随机值填充多个输入

2 个答案: