在Jquery中设置全局变量onclick

我想在Jquery中设置一个全局变量，这样当我单击列表项时，单击的列表项的id将成为变量的值。 我有下面的代码也在这个小提琴 。

但是我拥有它的方式：当你单击列表项时，值正确地放入console.log.However然后当我点击demo div时，变量被重置并且是未定义的。

当我点击demo时，如何获取id的值，当我点击列表项时，它是id的值？

例如：

当我点击aaa时，点击演示框时的值应为id-1

当我点击bbb时，单击演示框时的值应为id-2

 
 
aaa
 
bbb
 
  var id; jQuery(document).on("click", "li", function (event) { var id =jQuery(this).attr('id') || ''; console.log(id); $( "#demo" ).show(); }); $(function() { $("#demo").click(function(e) { console.log(id); }); });   #demo { border: 1px solid; display:none; height: 100px; width: 100px; }  

Answer 1

  var id; jQuery(document).on("click", "li", function (event) { //should not not var here, using var here will declare the variable id as a local variable in the handler function scope id = jQuery(this).attr('id') || ''; console.log(id); $("#demo").show(); }); $(function () { $("#demo").click(function (e) { console.log(id); }); }); 

Answer 2

你再次在循环中声明id 。

  var id; jQuery(document).on("click", "li", function (event) { id =jQuery(this).attr('id') || ''; console.log(id); $( "#demo" ).show(); }); 

更改

 var id =jQuery(this).attr('id') || ''; to id =jQuery(this).attr('id') || ''; inside the loop. 

Answer 3

这是因为你重新声明了var id

 var id; // GLOBAL jQuery(document).on("click", "li", function (event) { var id =jQuery(this).attr('id') || ''; // LOCAL TO THIS BLOCK 

所以只需使用全局变量，

 var id; // GLOBAL jQuery(document).on("click", "li", function (event) { id =jQuery(this).attr('id') || ''; // Use GLOBAL id here 

Answer 4

演示http://jsfiddle.net/devmgs/LbZe6/1/

不要使用var inside，因为它会使它成为局部变量

 var id; jQuery(document).on("click", "li", function (event) { id =jQuery(this).attr('id') || ''; console.log(id); $( "#demo" ).show(); }); $(function() { $("#demo").click(function(e) { console.log(id); }); });