JS ajax 获取方法外值

Question

$("#province,#city").change(function() {

    var i = $(this).attr('id');

    $.ajax({
        type: 'post',
        url: $("#address-form").attr('action'),
        dataType: 'text',
        data: {
            id: $(this).val()
        },
        success: function(data) {
            var id = '';

            alert(i);

            switch (i) {
            case 'city':
                id = "#area";
                break;
            case 'province':
                id = "#city";
                break;
            default:
                alert('\u8bf7\u786e\u8ba4\u8be5\u5bf9\u8c61\u0049\u0044');
            }
            $(id).empty();
            for (var i in data.msg) {
                $(id).append("<li value=" + data.msg[i].id + ">" + data.msg[i].name + "</li>");
            }
        }
    });
});

为什么alert(i); 获取不到值！ 上面定义的那个是可以弹出值的！

Answer 1

因为下面的var i声明提升到函数顶部，所以alert执行的时候自然是 undefined

$("#province,#city").change(function() {

    var i = $(this).attr('id');

    $.ajax({
        type: 'post',
        url: $("#address-form").attr('action'),
        dataType: 'text',
        data: {
            id: $(this).val()
        },
        success: function(data) {
            var i;//下面for中的声明被提升到这个位置
            var id = '';

            alert(i);

            switch (i) {
            case 'city':
                id = "#area";
                break;
            case 'province':
                id = "#city";
                break;
            default:
                alert('\u8bf7\u786e\u8ba4\u8be5\u5bf9\u8c61\u0049\u0044');
            }
            $(id).empty();
            for (i in data.msg) {//这个声明
                $(id).append("<li value=" + data.msg[i].id + ">" + data.msg[i].name + "</li>");
            }
        }
    });
});

Answer 2

随着问题更新而修改，@mcfog 大大的回答亮了。比较符合这个新问题的答案。

变量提升：

Hoisting is JavaScript's default behavior of moving declarations to the top.

因为你在后面的for循环用了var声明了i，所以提升到了当前function的顶部，那就是我之前解答提到的，先在function里面找i，因为变量提升i存在于当前作用域，又刚好没赋值，所以就拿不到值。

---

拿不到值，不科学啊。
为了验证一下，我也写了个代码测试。是可以获取的。

---

访问i时，先在所在的function找，找不到再往外面找，再找不到就往外面的外面找，一直找到天涯海角，哦不，是全局，还找不到，我也没办法- -||
楼主是不是在这个过程中i内啥被覆盖了？还是真的获取不到。

<input id='btn' type='text' />
<script type="text/javascript">
(function($){
    $('#btn').change(function(e){
        var i = $(this).attr('id');
        $.ajax({
            url: "./f",
            type:"GET",
            cache: false,
            data:'test=123',
            success: function(data){
                alert(i);
                try{
                  var dataObj = eval("("+data+")").root;
                }catch(e){
                  alert("数据出错:"+e);
                }       
             },
            error: function(e){
            }
         });
    })
})(jQuery);
</script>