在Jquery中设置全局变量onclick

Question

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

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

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

例如:

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

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

    <div id="demo"></div>
    <ul>
        <li id="id-1">aaa</li>
        <li id="id-2">bbb</li>
    </ul>

    <script>
    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);
    });
    });

    </script>

    <style>
    #demo {
        border: 1px solid; 
        display:none;
        height: 100px; 
        width: 100px;
    }
    </style>

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);
      });
  });