JQuery - доступ к VAR в функции, которая мне понадобится в другой функции?

Question

Хорошо, поэтому в моем html / js есть форма, которая обновляется на основе предыдущего выбора пользователя. На последнем этапе у меня есть меню выбора, где пользователь будет выбирать свой город. Я сохранил значение выбранного элемента в моем списке параметров с идентификатором #myCity для следующего.

('#myCity').change(function(){
    var CityValue = $("#myCity").val();
});

Как только это значение установлено, моя форма отображает кнопку отправки

<input type="submit" id="go" value="Submit" onclick="getweather()" />

Здесь я начинаю немного беспокоиться. В моей функции getweather () я хочу иметь возможность взять переменную CityValue сверху и добавить ее к другой переменной, чтобы я мог загрузить определенную страницу.

function getweather(){
                    var CityValue;
                    var to_load = 'getweather.php?p='+ CityValue +'.html';

                    $('#weather').empty().append(to_load);


                 }

но в моем тестировании я не думаю, что моя функция getweather () способна прочитать желаемую переменную. Кто-нибудь может предложить решение?

Answer 1

Ну, первая указанная вами функция (обработчик события для onchange) сейчас ничего не делает. Вы можете просто удалить его и отредактировать вторую функцию следующим образом:

function getweather(){
    var CityValue = $("#myCity").val();

    var to_load = 'getweather.php?p='+ CityValue +'.html';

    $('#weather').empty().append(to_load);
}

Answer 2

Более элегантный ответ на вопрос заключается в использовании jQuery data API . Это позволяет вам хранить произвольные данные внутри объекта, а не объявлять переменные, сохраняя все в хорошем ООП. Таким образом, сделать то, что вы хотите, будет означать сохранение значения следующим образом:

$('#myCity').change(function(){
   $("#myCity").data("CityValue", $("#myCity").val());
}); 

Таким образом, вы сможете получить его так:

function getweather(){
   var to_load = 'getweather.php?p='+ $("#myCity").data("CityValue") +'.html';
   $('#weather').empty().append(to_load);
}

Answer 3

Ну, первая указанная вами функция (обработчик события для onchange) сейчас ничего не делает. Вы можете просто удалить его и отредактировать вторую функцию следующим образом:

Затем вы можете добавить этот вызов функции к событию изменения.

function getweather(){
    var CityValue = $("#myCity").val();

    var to_load = 'getweather.php?p='+ CityValue +'.html';

    $('#weather').empty().append(to_load);
}

$('#myCity').change(getweather);

Answer 4

Вы объявили CityValue только в области действия функции, к которой вы не можете получить доступ извне. Либо объявите вашу переменную глобально:

var CityValue;
$('#myCity').change(function(){
    CityValue = $("#myCity").val();
});
function getweather() {
    var to_load = 'getweather.php?p='+ encodeURIComponent(CityValue) +'.html';
    $('#weather').empty().append(to_load);
}

Или просто позвоните $("#myCity").val() в вашей функции getweather:

function getweather() {
    var to_load = 'getweather.php?p='+ encodeURIComponent($("#myCity").val()) +'.html';
    $('#weather').empty().append(to_load);
}