1

我有一个使用 Twitter Bootstrap 的下拉菜单，我想根据我在下拉菜单中选择的内容更改我发送到我的 PHP 脚本的查询字符串。I have everything in place I believe I just think its an error with the scope as the category will not change when a new drop down menu item is selected and remains constantly fixed at genres.

$('#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() {}
            }

        });
4

3 回答 3

1

Just remove the var in your click handler:

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

Update

I totally missed this part:

You are initializing a string inline:

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

But never changing the value of that string when your dropdown is clicked.

Change your code to something like this:

$('#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() {}
        }

    });
});
于 2013-08-28T23:49:31.027 回答
0

这是一个范围问题 -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() {}
            }

        });    
}
于 2013-08-29T00:55:03.243 回答
0

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;


})();

这是一个模块模式。变量类别的范围是模块。它基本上是模块内的私有全局。这是一个更好的解决方案，因为它为您提供了封装、状态和一些结构。

于 2013-08-29T01:05:37.587 回答