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

只需删除点击处理程序中的var：

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

<强>更新

我完全错过了这一部分：

您正在初始化内联字符串：

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类别。因此，click处理程序设置的值限定为该闭包。您试图在闭包之外访问该值。在结束之外，类别的价值是“类型”。

试试这个：

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;


})();

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

在函数JQuery中更改变量

3 个答案: