Question

我刚刚放弃，试图找到一整天的解决方案。帮我理解这件事。为什么全局变量没有更新？

我有这个代码，它检查选项卡是否处于活动状态，然后我想根据选择的选项卡更新变量。因此，选项卡切换工作正常，激活内的console.log给出24，未定义。

var last;
jQuery('#tabs').tabs({
  active: 0,
  activate: function(event, ui) {
    if (ui.newPanel.is("#tabs-1")) {
      var last = 24;
      console.log(last)
    } else if (ui.newPanel.is("#tabs-2")) {
      var last = 48;
    } else if (ui.newPanel.is("#tabs-3")) {
      var last = 72;
    };

  }
});

console.log(last);

我在这里想念什么？

Answer 1

声明var是函数作用域。见What is the scope of variables in JavaScript?

您在页面顶部声明了var last全局作用域。

您在activate函数中声明了一个新变量var last = 24。这是一个不同的范围，因为它在一个函数内，因此它将成为这个激活函数的局部变量。随后的var last声明将被忽略，因为函数作用域中已存在一个，但这些值将分配给本地函数var last。

您的console.log(last)的范围限定为您从未提供值的全局last。

如果要使用全局last，请从函数中删除声明。然后，编译器将在函数中找不到本地var last，并冒险进入外部作用域，它将找到它将使用的全局last。

var last; // global scope
jQuery('#tabs').tabs({
  active: 0,
  activate: function (event, ui) {
    if (ui.newPanel.is("#tabs-1")) {
      last = 24; // remove var declaration to use global variable
      console.log(last); 
    }

    else if (ui.newPanel.is("#tabs-2")) {
      last = 48;
    }

    else if (ui.newPanel.is("#tabs-3")) {
      last = 72;
    };

  }
});

console.log(last); // global scope last

var last = -1; // global scope
var whereAmI = "GLOBAL SCOPE";

$('button').on('click',function() {  // new scope within function
    if (new Date().getMilliseconds() % 2 === 0) {
      var whereAmI = "FUNCTION SCOPE";
      var last = 24;
      console.log(last);
      console.log(whereAmI); 
    } else {
      last = 48;
      whereAmI = "FUNCTION SCOPE";
      console.log(last);
      console.log(whereAmI);
    }
});

console.log(last); // global scope
console.log(whereAmI); // global scope

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click Me!</button>

Answer 2

在var处理程序中使用activate使其成为局部变量，因此它不会更新外部范围变量

＆＃13;

var last;
jQuery('#tabs').tabs({
  active: 0,
  activate: function(event, ui) {
    if (ui.newPanel.is("#tabs-1")) {
      last = 24;
      console.log(last)
    } else if (ui.newPanel.is("#tabs-2")) {
      last = 48;
    } else if (ui.newPanel.is("#tabs-3")) {
      last = 72;
    };

  }
});

$('button').click(function() {
  $('#inputlast').val(last);
})

＆＃13;

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a>
    </li>
    <li><a href="#tabs-2">Proin dolor</a>
    </li>
    <li><a href="#tabs-3">Aenean lacinia</a>
    </li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
      leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
      Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean
      aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat.
      Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia
      nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna
      ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum.
      Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>

<br />
<input id="inputlast" readonly />
<button>Value</button>

＆＃13;

使用jQuery.tabs更新全局变量

2 个答案: