Изменение переменной внутри функции JQuery

Question

У меня есть выпадающее меню с использованием Twitter Bootstrap, и я хотел бы изменить строку запроса, которую я отправляю на свой PHP-скрипт в соответствии с тем, что я выбрал в раскрывающемся меню. У меня все на месте, я считаю, что я просто думаю, что его ошибка связана с областью, поскольку категория не изменится при выборе нового выпадающего элемента меню и постоянно фиксируется в жанрах.

$('#categoryInputValue').val(""); //Sets the category box to empty 
var catedgory = "Genres"; 
var queryString = 'autocomplete.php?cat=' +catedgory; 
console.log("Page Load : " + catedgory); 


$('.dropdown-menu a').click(function() 
{ 
    console.log(catedgory = $(this).text()); //Gets the category name from the list item 
    queryString = 'autocomplete.php?cat=' +catedgory; 
    $('#dropDownMenu').html(catedgory+' <span class="caret"></span>'); //Changes the drop down menu categories to the selected one and adds the downwards arrow 
    $('#categoryInputValue').attr("placeholder", catedgory); //Sets the placeholder to equal the category 
    console.log("Click : " + catedgory); 


}); 

$("#categoryInputValue").autocomplete({ 
      source: queryString, 
      minLength: 4, 
      messages: { 
       noResults: '', 
       results: function() {} 
      } 

     }); 

Answer 1

Просто удалите вар в обработчике щелчка:

$('.dropdown-menu a').click(function() 
{ 
    category = $(this).text(); 
    … 

Update

я полностью пропустил эту часть:

Вы инициализации строки инлайн:

var queryString = 'autocomplete.php?cat=' +category; 

Но никогда не изменяйте значение этой строки при нажатии выпадающего меню.

Изменить код на что-то вроде этого:

$('#categoryInputValue').val(""); //Sets the category box to empty 
var category = "Genres"; //Category drop down chosen at default 
var queryString = 'autocomplete.php?cat=' +category; // <=== Declare your var here 

console.log("Page Load : " + category); 


$('.dropdown-menu a').click(function() 
{ 
    // Remove var - not needed here. Update your query string with the new selection here 
    category = $(this).text(); //Gets the category name from the list item 
    queryString = 'autocomplete.php?cat=' +category; 

    $('#dropDownMenu').html(category+' <span class="caret"></span>'); //Changes the drop down menu categories to the selected one and adds the downwards arrow 
    $('#categoryInputValue').attr("placeholder", category); //Sets the placeholder to equal the category 
    console.log("Click : " + category); 

    $("#categoryInputValue").autocomplete({ 
     source: queryString, 
     minLength: 4, 
     messages: { 
      noResults: '', 
      results: function() {} 
     } 

    }); 
}); 

Answer 2

Это вопрос сферы - var category имеет различный объем от .click. Вы можете решить этот вопрос:

$('#categoryInputValue').val(""); //Sets the category box to empty 
var category = "Genres"; //Category drop down chosen at default 
console.log("Page Load : " + category); 
loadCategory(category); 


$('.dropdown-menu a').click(function() 
{ 
    var category = $(this).text(); //Gets the category name from the list item 
    $('#dropDownMenu').html(category+' <span class="caret"></span>'); //Changes the drop down menu categories to the selected one and adds the downwards arrow 
    $('#categoryInputValue').attr("placeholder", category); //Sets the placeholder to equal the category 
    console.log("Click : " + category); 

    loadCategory(category); 


}); 

function loadCategory(category) { 
    var queryString = 'autocomplete.php?cat=' +category; 
    $("#categoryInputValue").autocomplete({ 
      source: queryString, 
      minLength: 1, 
      messages: { 
       noResults: '', 
       results: function() {} 
      } 

     });  
} 

Answer 3

JavaScript - это язык с функциональными возможностями, а не язык с блочным охватом. Другими словами, переменные привязаны к функциям, которые они создаются внутри. Вы устанавливаете категорию var внутри закрытия вашего обработчика кликов. Таким образом, значение, заданное обработчиком кликов, ограничено этим закрытием. Вы пытаетесь получить доступ к этому значению за пределами закрытия. Вне закрытия значение категории «Жанры».

Попробуйте это:

var myModule = (function() { 

    var My = {}, 
     category = 'Genre'; 

    My.setAutocomplete = function(event) { 
     var target = event.currentTarget; 
     category = target.text(); 
     $('#dropDownMenu').html(category+' <span class="caret"></span>'); 
     $('#categoryInputValue').attr("placeholder", category); 
     console.log("Click : " + category); 
    }; 


    // DOM ready 
    $(function() { 

     $('#categoryInputValue').val(""); 

     $("#categoryInputValue").autocomplete({ 
      source: 'autocomplete.php?cat=' + category, 
      minLength: 1, 
      messages: { 
       noResults: '', 
       results: function() {} 
      } 
     }); 


     $('.dropdown-menu a').click(function (event) { 
      event.preventDefault(); 
      My.setAutocomplete(event); 
     }); 



    }); 

    return My; 


})(); 

Это шаблон модуля. Переменная категория привязана к модулю. Это в основном частный глобальный модуль. Это лучшее решение, потому что оно дает вам инкапсуляцию, состояние и некоторую структуру.