javascript - 変数は未定義ですが、定義されています

Question

以下のコードは、変数 のコンソールに未定義のエラーを表示しますmystyle。変数を定義したのでわかりません。

jQuery( '.styles_div' ).each( function() {
switch (styles) {
    case 'style1':
        var mystyle = $('#stylewrap').append('<div class="style1"></div> ');
        break;
    case 'style2':
        var mystyle = $('#stylewrap').append('<div class="style2"></div> ');
        break;
}
$("#search").autocomplete({
    delay: 0,
    minLength: 3,
    search: function( event, ui ) {mystyle.show();},
    ...
})
});

Answer 1

mystyleは、使用する前に定義する必要があります。おそらくグローバル変数として定義し、varキーワードを2回使用しないでください。存在をテストすることも賢明です

var mystyle;
switch (styles) {
    case 'style1':
        mystyle = $('#stylewrap').append('<div class="style1"></div> ');
        break;
    case 'style2':
        mystyle = $('#stylewrap').append('<div class="style2"></div> ');
        break;
}
$("#search").autocomplete({
    delay: 0,
    minLength: 3,
    search: function( event, ui ) {if (mystyle) mystyle.show();},
    ...
})

これが完全なコードである場合、おそらくこのコードはより単純です。

var mystyle = $('#stylewrap').append('<div class="'+styles+'"></div> ');

Answer 2

mystyleの前に定義しswitch caseます。それ以外の場合、コードは正しいです。