javascript - 如何在 onclick 函数之外声明按钮被单击

Question

$(document).ready(function() {
    var status = 'not active';
    $('#button').on('click', function() {
                var button = 'THE BUTTON IS CLICKED';
                var status = 'active';
                alert(button);
     });
      if(status == 'active'){
          alert('THE BUTTON IS ACTIVATED');
      } else {
          alert('THE BUTTON IS NOT ACTIVE');
      }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">X</button>

在我的代码中，我试图获取 onclick 函数外部按钮的 status 以输入 if 语句，但它没有得到完全在函数外部定义。我想让 alert('THE BUTTON IS ACTIVATED'); 正常工作。

Answer 1

您正在声明一个新变量，也称为 status ，它“混淆”了外部 status ，在函数内部。只需删除 var使用外部的:

$(document).ready(function() {
    var status = 'not active';
    $('#button').on('click', function() {
                var button = 'THE BUTTON IS CLICKED';
                status = 'active';
                alert(button);
     });
      if(status == 'active'){
          alert('THE BUTTON IS ACTIVATED')
      } else {
          alert('THE BUTTON IS NOT ACTIVE');
      }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">X</button>

编辑:您的代码中有两个奇怪的地方:您仅在文档准备好时使用警报状态一次，并且不切换 active地位。也许您想要这样的东西(对于此状态使用 bool 变量而不是字符串会更好):

$(document).ready(function() {
    var status = 'not active';
    $('#button').on('click', function() {
                var button = 'THE BUTTON IS CLICKED';
                status = (status == 'active') ? 'not active' : 'active';
                alert(button);

                showButtonStatus();
     });

     function showButtonStatus() {
        if(status == 'active'){
          alert('THE BUTTON IS ACTIVATED')
        } else {
          alert('THE BUTTON IS NOT ACTIVE');
        }
     }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">X</button>