jquery中的未定义变量错误

Question

我有这段代码，我想在jquery将创建的元素中显示il，但il未定义：这是代码：

<script>
$(document).ready(function(){
    var il = 1 ;
    $("#btn1").click(function(){
        $("p").append(" <b>Appended text</b>.");
    });
    $("#btn2").click(function(){
        $("ol").append("<li>Appended item " + il + " </li>");
var il = il + 1;
    });
});
</script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>

这是输出：

List item 1
List item 2
List item 3
Appended item undefined
Appended item undefined

Answer 1

只需使用il++。

 $(document).ready(function(){
    var il = 1 ;
    $("#btn1").click(function(){
        $("p").append(" <b>Appended text</b>.");
    });
    $("#btn2").click(function(){
        $("ol").append("<li>Appended item " + il + " </li>");
        il++;
    });
});

Answer 2

只需从var il = il + 1;中删除var。

仅对新变量声明使用var。

$(document).ready(function(){
    var il = 1 ;
    $("#btn1").click(function(){
        $("p").append(" <b>Appended text</b>.");
    });
    $("#btn2").click(function(){
        $("ol").append("<li>Appended item " + il + " </li>");
        il = il + 1;
    });
});

JSFiddle