Javascript 在函数JQuery中更改变量_Javascript_Jquery_Twitter Bootstrap

Javascript 在函数JQuery中更改变量

javascript jquery twitter-bootstrap

Javascript 在函数JQuery中更改变量,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,我有一个使用TwitterBootstrap的下拉菜单，我想根据我在下拉菜单上选择的内容更改发送到PHP脚本的查询字符串。我已经准备好了所有的东西，我相信我只是认为这是一个范围上的错误，因为当一个新的下拉菜单项被选中时，类别不会改变，并且在类型上保持不变 $('#categoryInputValue').val(""); //Sets the category box to empty var catedgory = "Genres"; var queryString = 'autocompl

我有一个使用TwitterBootstrap的下拉菜单，我想根据我在下拉菜单上选择的内容更改发送到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() {}
            }

        });

$（'#categoryInputValue'）.val（“”）//将类别框设置为空
var catedgory=“Genres”；
var queryString='autocomplete.php？cat='+catedgroy；
日志（“页面加载：+catedgroy”）；
$（'.下拉菜单a'）。单击（函数（）
{
console.log（catedgroy=$（this.text（））；//从列表项获取类别名称
queryString='autocomplete.php？cat='+catedgroy；
$（“#下拉菜单”）.html（CatedGroy+”；//将下拉菜单类别更改为所选类别，并添加向下箭头
$（“#categoryInputValue”）.attr（“占位符”，catedgroy）；//将占位符设置为与类别相等
console.log（“单击：“+catedgroy”）；
});
$（“#类别输入值”）.autocomplete({
资料来源：queryString，
最小长度：4，
信息：{
结果：''，
结果：函数（）{}
}
});

只需删除单击处理程序中的变量：

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

    });
});

$（'#categoryInputValue'）.val（“”）//将类别框设置为空
var category=“Genres”//默认情况下选择“类别”下拉列表
var queryString='autocomplete.php？cat='+category；// 只需删除单击处理程序中的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() {}
        }

    });
});

$（'#categoryInputValue'）.val（“”）//将类别框设置为空
var category=“Genres”//默认情况下选择“类别”下拉列表
var queryString='autocomplete.php？cat='+category；// 这是一个范围问题-var类别
的范围与不同。单击
。你可以用这个办法解决
$('#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() {}
            }

        });    
}

$（'#categoryInputValue'）.val（“”）//将类别框设置为空
var category=“Genres”//默认情况下选择“类别”下拉列表
控制台日志（“页面加载：+类别）；
装载类别（类别）；
$（'.下拉菜单a'）。单击（函数（）
{
var category=$（this）.text（）；//从列表项获取类别名称
$（“#dropDownMenu”）.html（类别+”；//将下拉菜单类别更改为所选类别，并添加向下箭头
$（“#categoryInputValue”）.attr（“占位符”，类别）；//将占位符设置为与类别相等
console.log（“单击：“+类别”）；
装载类别（类别）；
});
函数loadCategory（类别）{
var queryString='autocomplete.php？cat='+类别；
$（“#类别输入值”）.autocomplete({
资料来源：queryString，
最小长度：1，
信息：{
结果：''，
结果：函数（）{}
}
});    
}
这是一个范围问题-风险类别
的范围与不同。单击
。你可以用这个办法解决
$('#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() {}
            }

        });    
}

$（'#categoryInputValue'）.val（“”）//将类别框设置为空
var category=“Genres”//默认情况下选择“类别”下拉列表
控制台日志（“页面加载：+类别）；
装载类别（类别）；
$（'.下拉菜单a'）。单击（函数（）
{
var category=$（this）.text（）；//从列表项获取类别名称
$（“#dropDownMenu”）.html（类别+”；//将下拉菜单类别更改为所选类别，并添加向下箭头
$（“#categoryInputValue”）.attr（“占位符”，类别）；//将占位符设置为与类别相等
console.log（“单击：“+类别”）；
装载类别（类别）；
});
函数loadCategory（类别）{
var queryString='autocomplete.php？cat='+类别；
$（“#类别输入值”）.autocomplete({
资料来源：queryString，
最小长度：1，
信息：{
结果：''，
结果：函数（）{}
}
});    
}
JavaScript是一种函数范围的语言，而不是块范围的语言。换句话说，变量的作用域是它们在其中创建的函数。您正在单击处理程序的闭包内设置var category。因此，单击处理程序设置的值的作用域是该闭包。您正试图在闭包之外访问该值。在闭包之外，类别的价值是“类型”
试试这个：
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;


})();

var myModule=（函数（）{
var My={}，
类别=‘流派’；
My.setAutocomplete=函数（事件）{
var target=event.currentTarget；
category=target.text（）；
$（“#下拉菜单”）.html（类别+”；
$（'#categoryInputValue'）.attr（“占位符”，类别）；
console.log（“单击：“+类别”）；
};
//DOM就绪
$（函数（）{
$（“#categoryInputValue”）.val（“”）；
$（“#类别输入值”）.autocomplete({
来源：“autocomplete.php？cat=”+类别，
最小长度：1，
信息：{
结果：''，
结果：函数（）{}
}
});
$（'.下拉菜单a'）。单击（函数（事件）{
event.preventDefault（）；
My.setAutocomplete（事件）；
});
});
归还我的；
})();

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