jQuery Global Variable

问题

Can someone explain me why this doesn't work:

$(function() { 
   var damg = $(".hidden").val();

    $("button").click(function() {
        alert(damg);
    });
});

jsFiddle: http://jsfiddle.net/raFnT/

Is it good to use global variables? I've also read that it is a slower option than typing it every time?

To explain in detail:

I have this:

$("button").click(function() {
            alert(damg);
        });

and the damg is a value of the input: var damg = $(".hidden").val();

When you type something in the input and THEN press the button, alert the value of that input.

I could use

$("button").click(function() {
var damg = $(".hidden").val();
                alert(damg);
            });

but in one point that I will have 100 functions I will end up like this:

$("button1").click(function() {
    var damg = $(".hidden").val();
                    alert(damg);
                });

$("button2").click(function() {
    var damg = $(".hidden").val();
                    alert(damg);
                });

$("button3").click(function() {
    var damg = $(".hidden").val();
                    alert(damg);
                });

$("button4").click(function() {
    var damg = $(".hidden").val();
                    alert(damg);
                });

$("button5").click(function() {
    var damg = $(".hidden").val();
                    alert(damg);
                });

I want to set a global variable so that on every function I don't need to call the function again.

Something like this:

var damg = $(".hidden").val();

$("button1").click(function() {
        alert(damg);
    });

$("button2").click(function() {
        alert(damg);
    });

$("button3").click(function() {
        alert(damg);
    });

$("button").click(function() {
        alert(damg);
    });

$("button4").click(function() {
        alert(damg);
    });

$("button5").click(function() {
        alert(damg);
    });

回答1:

You have it backwards, a global variable has to be written OUTSIDE of a function.

Your code doesn't work because .hidden doesn't have a value.

http://jsfiddle.net/raFnT/2/

It is bad practice to use global variables unless you really need them to be global. I don't know what you mean by 'typing it every time.'

Also, you are not reloading the value in the click handler.

$(function() {            
    $("button").click(function() {
        var damg = $(".hidden").val();
        alert(damg);
    });            
});

http://jsfiddle.net/raFnT/6/

In the interest of having a good answer, what the OP wants is the blur function.

$(function() {     
    var damg;

    $(".hidden").blur(function () {
        damg = $(".hidden").val();
    });

    $("button").click(function() {
        alert(damg);
    });            
});

http://jsfiddle.net/raFnT/7/

回答2:

Your example is working. The issue is that you are setting damg on document ready. On document ready your text box has no value in it. If you assign a default value it will alert that value on button click. You can see this in action in this fiddle: http://jsfiddle.net/raFnT/1/

If you would like to change the value of damg on every button click change your code to this:

var damg;

$("button").click(function() {
    damg = $(".hidden").val();
    alert(damg);
});

回答3:

The damg variable is being set immediately when the function first executes - you need to set that var in the click function itself so that it grabs the value from the field at that time.

Not sure why this was down voted - this is what you have asked for:

$(function() { 

   var damg = $(".hidden").val();

    $("button").click(function() {
        damg = $(".hidden").val();
        alert(damg);
    });

});

Or even more simply:

$(function() { 

    $("button").click(function() {
        alert( $(".hidden").val(); );
    });

});

回答4:

Just adding my two cents, here's the same solution but using a change function to monitor for changes.

JS

var damg;

$('#contact-name').on('change', function(){
    damg = $(".hidden").val();
});

回答5:

That's not a global variable. That's a var scoped to the anonymous function you pass to jQuery's ready handler.

The reason that doesn't work (and by not work, I assume you mean it alerts an empty string) is because damg is assigned when the DOM loads. At that time, your text box doesn't have a value. So it actually is working. If you want the text box's value whenever you click the button, you need to get it's value inside the click handler.

You can cache the DOM lookup by doing something like this though:

$(function() {
    var damg = $(".hidden");

    $("#one").click(function() {
        alert("button one: " + damg.val());
    });

    $("#two").click(function() {
        alert("button two: " + damg.val());
    });
});

<input type="text" class="hidden" placeholder="Type text here">
<button id="one">Click me(1)!</button>
<button id="two">Click me(2)!</button>

来源：https://stackoverflow.com/questions/8389062/jquery-global-variable