Question

我坚持使用此代码，并且不明白为什么它没有像我预期的那样工作。这样，布尔变量＆＃34; x＆＃34;每次点击#btn：

时都会更改其值

$(document).ready(function() {
  var x = false;
  $("#btn").click(function() {
    toggleBtn(x);
    x = !x;
  });
  function toggleBtn(x) {
    if (!x) {
      doThis();
    } else {
      doThat();
    }
  };
});

但是这样，＆＃34; x＆＃34;不会改变它的价值：

$(document).ready(function() {
  var x = false;
  $("#btn").click(function() {
    toggleBtn(x);
  });
  function toggleBtn(x) {
    if (!x) {
      doThis();
    } else {
      doThat();
    }
    x = !x;
  };
});

为什么？

Answer 1

因为您有两个 x变量。

这里宣布一个：

var x = false;

另一个在这里宣布：

function toggleBtn(x) {

在第一个示例中，您要更新第一个x的值。在第二个示例中，您要更新 second x的值。当函数结束并被销毁时，它会立即超出范围。

Answer 2

试一试：

$(document).ready(function(){

     var x = false;

    $("#btn").click(function() {
        toggleBtn(x);
    })

    function toggleBtn(x) {
        if (!x)
            doThis();

        else 
            doThat();         
    }

    function doThis() {
        alert("do This");
        x = !x;
    }

    function doThat() {
        alert("do That");
        x = !x;
    }

})

最终代码：

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <style>
    </style>
</head>
<body>
    <button id="btn">OK</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        
$(document).ready(function(){
    
     var x = false;
    
    $("#btn").click(function() {
        
        toggleBtn(x);
        
    })
    
    function toggleBtn(x) {
        
        if (!x)
            doThis();
        
        else 
            doThat();
                
    }
    
    function doThis() {
        alert("do This");
        x = !x;
    }
    
    function doThat() {
        alert("do That");
        x = !x;
    }
})
        
    </script>
</body>
</html>

＆＃13;

布尔值不会更改其值

2 个答案: