if 语句似乎失败，即使它打印了一个矛盾的消息答案

【问题标题】：If statement seems to fail even though it prints a contradictory messageif 语句似乎失败，即使它打印了一个矛盾的消息
【发布时间】：2018-08-16 02:18:31
【问题描述】：

  <script src="jquery-3.3.1.js"></script>
  <script src="jquery.hotkeys.js"></script>
  <script>

    $(document).ready(function(){
      $(document).on("keydown", null, "down", function(){
        var leftPaddleRef = document.getElementById('leftPaddle');
        if (leftPaddleRef.style.top >= "100") {
          alert(leftPaddleRef.style.top);
        }
        else{
          $("#leftPaddle").animate({
            top: "+=3%"
          },
            "fast"
          );
        }
      });
    });

  </script>

^ 这个 ^ 是我的脚本。 “leftPaddle”是乒乓球游戏中的左桨，它是一个“顶部”值为 50% 的 div，将其设置为页面的中间位置，我希望它在按下向下键时向下移动直到顶部值达到 100%。这 “警报（leftPaddleRef.style.top）；” 仅用于故障排除目的。

整个程序的问题在于，我第二次按下向下键时，if 语句失败并打印“53.00001%”或类似的小数位数（如果这很重要）。我想知道的是，如果值只有 53%，为什么 if 语句会失败。谁能帮帮我？

【问题讨论】：

如果leftPaddleRef 的样式设置为不是内联样式，使用style 属性，您必须使用getComputedStyle(leftPaddleRef).top 来获取属性的值。而且，要检查属性的数字值，您必须从值中去掉% 符号。使用parseFloat(getComputedStyle(leftPaddleRef).top)获取数值。

标签： javascript jquery if-statement jquery-plugins jquery-animate

【解决方案1】：

尝试将parseFloat 应用于leftPaddleRef.style.top。这将去掉百分号并将其视为数字/浮点数而不是字符串：

<script src="jquery-3.3.1.js"></script>
<script src="jquery.hotkeys.js"></script>
<script>

    $(document).ready(function(){
      $(document).on("keydown", null, "down", function(){
        var leftPaddleRef = document.getElementById('leftPaddle');
        var leftPaddleTop = parseFloat(leftPaddleRef.style.top);
        if (leftPaddleTop >= 100) {
          alert(leftPaddleRef.style.top);
        }
        else{
          $("#leftPaddle").animate({
            top: "+=3%"
          },
            "fast"
          );
        }
      });
    });

</script>

【讨论】：

非常感谢，我回家试试这个！