jquery - 関数の外で変数を返す

Question

jQuery 関数を介して変数を返す際に問題が発生しています。

$(document).ready(function () {
    var selected = "";

    $('.whitetheme').on('click', function () {
        $(this).effect("highlight", {}, 2000);
        selected = "whitetheme";
        return selected;

        $('.blacktheme').fadeOut(1500);
        $('.redtheme').fadeOut(1500);

    })

    console.log(selected);
});

クリックすると、selected の値を「whitetheme」に変更しようとしています。

現在、ログ関数は空の文字列を返します。

Answer 1

変数値を変更する (そして呼び出された場合) イベント ハンドラーをバインドしています。ただし、console.logが実行される前にイベントが発生することはないため、更新された値は表示されません。

また、そのコード部分に到達できないためblacktheme、redthemeクラスはフェードアウトしません。

正確に何を達成しようとしていますか？

Answer 2

クリック後に console.log が出力されるように、このように少し変更してみてください。

$(document).ready(function () {
    var selected = "";

    $('.whitetheme').on('click', function () {
        $(this).effect("highlight", {}, 2000);
        selected = "whitetheme";
        // return selected; don't need this or the next 2 lines won't execute

        $('.blacktheme').fadeOut(1500);
        $('.redtheme').fadeOut(1500);

        console.log("selected: "+selected);
    });
    // console.log(selected); moved above
});

Answer 3

上記の私の質問/コメントに沿って進むには：

$(document).ready(function() {

var selected = "";

$('.whitetheme').on('click', function(){
$(this).effect("highlight", {}, 2000);
selected = "whitetheme";

/*Moved this line*/
console.log(selected);

return selected;
$('.blacktheme').fadeOut(1500);
$('.redtheme').fadeOut(1500);

})
});