Question

我对这个堆栈代码有疑问：

<div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onblur="select()">Month<span class="caret"></span></button>
        <ul class="dropdown-menu" id="month">
            <li><a href="#01">January</a></li>
            <li><a href="#02">February/a></li>
            <li><a href="#03">March</a></li>
            <li><a href="#04">April</a></li>
            <li><a href="#05">May</a></li>
            <li><a href="#06">Juny</a></li>
            <li><a href="#07">July</a></li>
            <li><a href="#08">August</a></li>
            <li><a href="#09">September</a></li>
            <li><a href="#10">October</a></li>
            <li><a href="#11">November</a></li>
            <li><a href="#12">December</a></li>
        </ul>
</div>
<script>
    function select(){
        var value;

        $(document).on('click', 'li a', function () {
             value = $(this).attr('href');
             console.log(value); // Result is the value set. Ex: Value = Link
        });    

        console.log(value); // Result is undefined
     }
</script>

在此段中，单击按钮时会调用该函数。变量value的Tha值不在JQuery函数之外：

function select(){
    var value;

    $(document).on('click', 'li a', function () {
        value = $(this).attr('href');
        console.log(value); // Result is the value set. Ex: Value = Link
    });    

    console.log(value); // Result is undefined
}

如何在Jquery函数之外使用变量以及Jquery为什么会出现这种行为？

Answer 1

您无法获得给定脚本的预期输出。 Jquery或Javascript也没有错误。

在解释代码流之前，我想提一下，事件处理程序注册不正确。

说明：

每次发生onblur事件（意味着点击月份按钮并单击外部）时，将调用select函数并执行以下3个操作。

function select() {
    //(1)value variable decalred and it is "undefined"
    var value;

    //(2)event handler registration happens
    $(document).on('click', 'li a', function () {
        //this block will not executed during select function call
        value = $(this).attr('href');
        console.log(value); // Result is the value set. Ex: Value = Link
    });    

    //(3)prints value variable and it is undefined, regardless of how many times
    //   select function is called.
    console.log(value); // Result is undefined
}

通过查看上面的流程，只有内部块具有＆＃34;值＆＃34;变量。如果你调用select函数来检查它，因为select函数有值声明，它将再次使用＆＃34; undefined＆＃34;并且再次注册事件处理程序，这是不好的并打印新实例＆＃34;＆＃34; value＆＃34;变量即＆＃34;未定义＆＃34;。

好吧，让我们试着保持变量＆＃34;值＆＃34;在选择功能之外

var value; // <-- declaring outside select function
function select() {

    $(document).on('click', 'li a', function () {
        value = $(this).attr('href');
        console.log(value); // Result is the value set. Ex: Value = Link
    });    
    console.log(value); // Result is undefined
}

检查此http://jsfiddle.net/gLeoyuLh/1/

中的上述更改

现在您可以访问＆＃34;价值＆＃34;函数外的变量也是。但它仍然存在多个事件处理程序注册问题＆＃34;并保持＆＃34;价值＆＃34;函数外（全局）不是问题/错误，但你应该避免它。这不是一个好习惯。

<强>解决方案

在onload期间声明事件寄存器，或者还有许多其他方法可以执行此操作。检查相同示例http://jsfiddle.net/gLeoyuLh/2/

的此次加载更改

Answer 2

我不确定您要完成的任务，但您的变量超出了范围。

var value;

$(document).on('click', 'li a', function () {
    value = $(this).attr('href');
});    

function getValue(){
   return value;
}

点击链接后，您可以调用此方法来检索值：

getValue()

Answer 3

为什么不在没有click事件的情况下将a绑定到onblur？ Example..

<script>
    $("#month").find("a").on('click', function () {
        value = $(this).attr('href');
        console.log(value); // Result is the value set. Ex: Value = Link
    }); 
</script>

Answer 4

这里的事情是，当点击'li a'时，将分配'value'值。

现在您的功能正在执行以下操作：

function select(){
 var value;
 console.log(value);
}

在你的其余代码中，你只是添加了一个点击监听器，当用户执行点击事件时，它会被调用。

我认为你必须写出类似的东西：

function select(){


    $(document).on('click', 'li a', function () {
console.log(value); // Result is the value set. Ex: Value = Link
      changeValue($(this).attr('href'));

    });    


}

function changeValue(val){

//Create some code to change the value of a global attribute or the desired behavior

}

理解回调函数Jquery

4 个答案: