变量的值总是未定义的

Question

当我尝试使用此代码时，变量＆＃39; active_field＆＃39;永远不会定义＆＃39;，无论我先点击什么项目。

$('#kompetenz1').click(function(){
    alert(active_field);
    if (active_field) { 
        $('.content' + active_field + ', #kompetenz'+ active_field +' img').hide();
    }
    $('.content1, #kompetenz1 img').show();
    var active_field = 1;
});

$('#kompetenz2').click(function(){
    if (active_field) { 
        $('.content' + active_field + ', #kompetenz'+ active_field +' img').hide();
    }
    $('.content2, #kompetenz2 img').show();
    var active_field = 2;
});

$('#kompetenz3').click(function(){
    if (active_field) { 
        $('.content' + active_field + ', #kompetenz'+ active_field +' img').hide();
    }
    $('.content3, #kompetenz3 img').show();
    var active_field = 3;
});

$('#kompetenz4').click(function(){
    if (active_field) { 
        $('.content' + active_field + ', #kompetenz'+ active_field +' img').hide();
    }
    $('.content4, #kompetenz4 img').show();
    var active_field = 4;
});

我该如何解决这个问题？