Question

我在Grails模板中有这个代码块的Javascript代码：

    <script>
    $(document).ready(function() {

    var currentIndex = 0;
    var allIssues = $('#all-issues'); // The unordered list 'ul'
    var removeIssues = []; // An array to keep track of issues removed
    if (allIssues.length) { // If there are issues to be displayed
      var size = $('#all-issues').size();

      allIssues.first().removeClass("display-none");  
      allIssues.first().addClass("display");

      $('#startIndex').html(currentIndex + 1);      
      $('#sizeIndex').html(size);

      $('#nextRedIssue').on ('click' ,function () {           
           var $li = $('#all-issue.display');   
           var index = $('#all-issue').index($li)
           if (index < size) {           
              $li.addClass("display-none");
              $li.removeClass("display");

              var $nextLi = $('#all-issue').get(index++) 

              $nextLi.removeClass("display-none");
              $nextLi.addClass("display");
           }        
      });
  }
});
</script>

现在我定义var currentIndex和var allIssues的第二行和第三行，它们一直是未定义的（甚至不存在），但当我将它们移到DOM之外时，这个问题就消失了ready子句（但当然仍在标签内）。我不明白为什么会这样，并且想知道。似乎我只是删除document.ready wrapper，所有在开始定义之前未定义的变量并且正常工作。感谢。

Answer 1

我怀疑问题是当您测试变量时，您的文档实际上并未“准备就绪”。也许你有一些页面碎片尚未完全加载。你什么时候测试变量的存在？也许该测试需要在文档准备好之后。

Answer 2

我认为变量是在就绪功能

如果是这样： 请注意，JavaScript变量具有函数作用域，这意味着它们仅在函数本身内定义。

[编辑] 在任何函数之外声明的变量都具有全局作用域，使它们在整个代码中定义（除了在函数内声明同名变量的情况）。这就是为什么可以看到它们就绪功能的原因。请注意，您应该避免使用全局变量，但如果不查看其余代码，我们就不知道应该推荐什么。 [结束编辑]

如果不是： 我们可能需要查看更多代码。应在整个函数中定义currentIndex，只要您的 ul 的ID为allIssues，就应定义all-issues。

Javascript DOM与变量混淆

2 个答案: