Возвращаемые переменные вне функции

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); 
}); 

Я пытаюсь, чтобы значение выбранного изменено на «whitetheme» после его нажатия.

В настоящее время функция журнала возвращает пустую строку.

Answer 1

Вы привязываете обработчик событий, который (и будет, если вызван) изменит значение переменной. Однако событие не может произойти до выполнения console.log, так что вы не увидите обновленное значение.

Кроме того, ваши классы blacktheme и redtheme не исчезнут, поскольку эта часть кода недоступна.

Что именно вы пытаетесь достичь?

Answer 2

Чтобы идти вместе с моим вопросом/комментарий выше:

$(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); 

}) 
}); 

Answer 3

Попробуйте изменить его немного, как это так, чтобы ваши 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 
});