javascript - JS定义的方法仅在语句的一部分等于NaN

标签 javascript jquery html methods nan

我正在构建一个答题器的一部分,它允许您创建一个包含价格、价格增量和每秒金钱的新对象。我制作了一个原型(prototype),其中包含一个 If 语句,用于检查您是否有足够的资金进行购买。 If 语句内部是一个 while 循环,可确保计数器在您达到最大金额时停止。

问题是我正在使用一种名为 addMps(每秒金钱) 的方法,它告诉每秒添加多少钱。在 If 语句的第一部分中,addMps 方法工作正常,但在第二部分中它返回的不是数字。仅使用数字或变量即可正常工作。有什么建议吗?

这是我的代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>clicker testing</title>
      <link href="/style.css" rel="stylesheet" type="text/css" media="all">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<script>
/*    $(".test").click(function() {
 if(amount >= testPrice) {
  memory -= testPrice;
   testPrice += 25;
    memoryPerSec+= 10;
     $(".logo").text("logo plus 10mps: " + logoPrice + "memory");
     memoryPerSecUpdate();
function logo() {
 if(memory < maxMemory) {
  memory+= 10;
   counterUpdate();
    setTimeout(logo, 1000);
     }
      }
       setTimeout(logo, 0);
 }
 else {
  alert("not enough memory");
}
});*/
var money = 200;
 var maxMoney = 300;
  var mps = 0;
function updateCounters() {
  $(".money").text("money: " + money);
   $(".mps").text("money per sec: " + mps);
    $(".max").text("max money: " + maxMoney);
}
   function clicker(addPrice, addPriceIncrement, addMps) {
        this.addPrice = addPrice;
         this.addPriceIncrement = addPriceIncrement; 
          this.addMps = addMps;
   }
   var stuff = new clicker(100, 25, 10);
clicker.prototype.buy = function() {
 if(money >= this.addPrice) {
  money -= this.addPrice;
   this.addPrice += this.addPriceIncrement;
    mps += this.addMps;
     updateCounters();
function max() {
 if(money < maxMoney) {
  money += this.addMps;
   updateCounters();
    setTimeout(max, 1000);
     }
      }
       setTimeout(max, 0);
 }
 else {
  alert("not enough memory");
}
};
$(document).ready(function() {
  updateCounters();
   $(".stuff").click(function() {
    stuff.buy();
  });
});
</script>
  </head>
<body style="text-decoration: underline; font-family: verdana;">
  <div class="stuff">stuff</div>
  <div class="money"></div>
  <div class="mps"></div>
  <div class="max"></div>
  <h4>go ahead an click stuff then change this.addMps to a number in the max() function and it works:<br>
  p.s its on line 56
  </h4>
</body>
</html>

最佳答案

问题是 this 与函数内的东西不同,它被重新定义,所以你必须将它放入另一个变量中,就像这样 var self = this;。见下文:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>clicker testing</title>
      <link href="/style.css" rel="stylesheet" type="text/css" media="all">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<script>
/*    $(".test").click(function() {
 if(amount >= testPrice) {
  memory -= testPrice;
   testPrice += 25;
    memoryPerSec+= 10;
     $(".logo").text("logo plus 10mps: " + logoPrice + "memory");
     memoryPerSecUpdate();
function logo() {
 if(memory < maxMemory) {
  memory+= 10;
   counterUpdate();
    setTimeout(logo, 1000);
     }
      }
       setTimeout(logo, 0);
 }
 else {
  alert("not enough memory");
}
});*/
var money = 200;
 var maxMoney = 300;
  var mps = 0;
function updateCounters() {
  $(".money").text("money: " + money);
   $(".mps").text("money per sec: " + mps);
    $(".max").text("max money: " + maxMoney);
}
   function clicker(addPrice, addPriceIncrement, addMps) {
        this.addPrice = addPrice;
         this.addPriceIncrement = addPriceIncrement; 
          this.addMps = addMps;
   }
   var stuff = new clicker(100, 25, 10);
clicker.prototype.buy = function() {
 if(money >= this.addPrice) {
  money -= this.addPrice;
   this.addPrice += this.addPriceIncrement;
    mps += this.addMps;
     updateCounters();
var self = this;
function max() {
 if(money < maxMoney) {
  money += self.addMps;
   updateCounters();
    setTimeout(max, 1000);
     }
      }
       setTimeout(max, 0);
 }
 else {
  alert("not enough memory");
}
};
$(document).ready(function() {
  updateCounters();
   $(".stuff").click(function() {
    stuff.buy();
  });
});
</script>
  </head>
<body style="text-decoration: underline; font-family: verdana;">
  <div class="stuff">stuff</div>
  <div class="money"></div>
  <div class="mps"></div>
  <div class="max"></div>
  <h4>go ahead an click stuff then change this.addMps to a number in the max() function and it works:<br>
  p.s its on line 56
  </h4>
</body>
</html>

关于javascript - JS定义的方法仅在语句的一部分等于NaN,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36805205/

相关文章:

php - 如何禁用文本区域中的拖放

javascript - 为什么我会收到 ParseError?

jquery - Materialise 模态覆盖整个页面(模态弹出窗口未置于前台)

javascript - 从另一个选择框中隐藏所选选项

javascript - 当 Javascript 关闭时,Flash 变量在 Chrome 中无法访问

javascript - AngularJS,选择 onChange 或 ngChange

javascript - Jquery 验证 : accept only number and punctuation marks

javascript - 流 - 类型可能与联合类型不兼容

javascript - 谷歌自定义搜索确定何时加载脚本

javascript - 绝对定位div的布局问题