If 语句似乎失败了，即使它打印了一条矛盾的消息

Question

  <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" 是乒乓球游戏中的左桨，它是一个 div，"top" 值为 50% 以将其设置在页面的中间位置，我希望它在按下向下键，直到最高值达到 100%。这 "alert(leftPaddleRef.style.top);" 仅用于故障排除目的。

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

Answer 1

尝试将 parseFloat 应用于 leftPaddleRef.style.top。这将删除百分号并将其视为 number/float 而不是字符串：

<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>

If 语句似乎失败了，即使它打印了一条矛盾的消息

If statement seems to fail even though it prints a contradictory message

javascript

jquery

if-statement

jquery-plugins

jquery-animate