为什么这个JQuery代码给我一个未定义的？

Question

$(document).ready(function() { 
    var id; 
    $('.dropdown-menu a').click(function() { 
     id = $(this).text(); 
     $('#selected').text($(this).text()); 
    }); 
    console.log(id); 
}); 

我使用上面的代码从下拉列表中选择一个选项，然后在我的所有JS文件中使用该变量作为全局变量。但是，这在控制台中给我一个undefined。我怎样才能让id在我的所有JS文件中充当全局变量？

Answer 1

你不需要id是一个全局变量，我看不出如何有利于所有。

它的记录未定义，因为它在调用时未定义，您只能在调用click事件后设置该值。

$(document).ready(function() { 
    var id = "foo"; 
    $('.dropdown-menu a').click(function() { 
     id = $(this).text(); 
     $('#selected').text($(this).text()); 

     console.log(id); // This will now log whatever was in your text value 
    }); 
    console.log(id); //This will now log 'foo' 
}); 

这是做什么用你的代码发生在一分钟

$(document).ready(function() { 

    //You're not passing id a value, so it gets initialised as undefined. 
    var id; 

    $('.dropdown-menu a').click(function() { 
     id = $(this).text(); 
     $('#selected').text($(this).text()); 

     console.log(id); // This will now log whatever was in your text value 
    }); 

    //The click event hasn't been called yet, so id is still undefined. 
    console.log(id); 

    //You've only assigned a click event above, you didn't call it, id will 
    //not get set until '.dropdown-menu a' has been clicked. 
}); 

虽然外面你的问题的范围，在回答您的意见，使ID的全局变量，我想补充一个全局变量，而不仅仅是一个随机的'id'属性。

$(document).ready(function() { 
    var App = window.App || (window.App = {}); 

    App.id = "foo"; 

    $('.dropdown-menu a').click(function() { 
     App.id = $(this).text(); 
     $('#selected').text($(this).text()); 

     console.log(App.id); // This will now log whatever was in your text value 
    }); 
    console.log(App.id); //This will now log 'foo' 
}); 




//In some other JS file on your webpage/in scope 
var App = window.App || (window.App = {}); 

console.log(App.id); //This should log the ID, providing it was called after the above code. 

其中一个最重要的原因，加上“身份证”作为一个全球性的是一个坏主意，就是你可以结束了，有很多的任意值填充全局命名空间，没有结构，因此很难维护代码，您可能会冒险覆盖全局名称空间上的重要属性，这可能会导致您的网站/应用程序中出现未定义的行为。

使用单个全局对象是利用全局名称空间的可接受方式，而不会冒意冒犯其他变量的意外覆盖，而且它也更容易调试您的Apps变量。 （大概）只会记录你的应用程序创建的变量，因此你不需要通过许多其他变量来查找你的应用程序。

如果您使用我上面的代码的建议，比较这两个日志：

console.log(window.App); 

console.log(window); //The global namespace 

你应该看到的是，第一个日志打印你出一个漂亮的，干净的物体只是你的变量“ID”里面，你应该在第二个日志中看到一吨变量，事实上，你甚至可能不得不在控制台中向下滚动以找到你的'id'变量。

Answer 2

id是一个局部变量，仅在您的$(document).ready()函数中可用。如果你想拥有全局访问权限，那么在任何函数之外定义它。这应该可以解决你的问题。你可以阅读更多关于范围Here。

希望这会有所帮助！

Answer 3

你的代码将是未定义的是正确的。因为当页面加载但用户不点击$（'。dropdown-menu a'），然后没有值为id变量。

$(document).ready(function() { 
    var id; 
    $('.dropdown-menu a').click(function() { 
     id = $(this).text(); 
     $('#selected').text($(this).text()); 
    }); 
    console.log(id); 
}); 

如果你还是想看到变量的值就可以解决这样的

$(document).ready(function() { 
    var id; 
    $('.dropdown-menu a').click(function() { 
     id = $(this).text(); 
     $('#selected').text($(this).text()); 
     console.log(id); 
    }); 
}); 

希望这有助于！=）

Answer 4

由于id的值仅在您点击$('.dropdown-menu a')时发生变化，但在准备好的功能中，您无需任何条件即可打印出来。您在ready函数中定义了var id，然后定义了仅在单击事件时发生的函数，然后打印出id。在var id的定义和打印其值之间没有点击发生，因此没有改变，因此它仍然是未定义的。如果你想看一下修改代码后有什么的id值：

$('.dropdown-menu a').click(function() { 
    id = $(this).text(); 
    $('#selected').text($(this).text()); 
    console.log(id); 
}); 

这将在控制台打印出值点击.dropdown-menu a

Answer 5

var globalScope = globalScope || {}; 

$(document).ready(function() { 
    $('.dropdown-menu a').click(function() { 
     globalScope.id = $(this).text(); 
     $('#selected').text($(this).text()); 
     console.log(globalScope.id); 
    }); 
}); 

警告后：点击是一个事件，你是在事件注册不执行后记录ID。如果您想在每次点击后记录新事件，请将其放入事件中。

使用javascript命名空间模式而不是delcare它的功能，只是为了防止未来的问题和讨价还价的数据。

Answer 6

$(function() // jquery 
{ 
    $("#id Your Checkbox").Change(function() 
    { 
      var id = $(this).Val(); 
      // now , you can use of id. 
      $("#test").text(id); 
    }); 
});