javascript - 调用 jQuery .val() 时的 javascript 别名。为什么？

Question

我想备份一个文本框值以允许表过滤。当用户按下退格键并将文本框留空时，我想放置我之前备份的先前值：

vbackup 存储初始文本框值，这是 jsfiddle 中的“hello”。

$('#btn').click(function () {
    $('#mydiv').slideToggle('fast', function () {
        // I SAVE THE TEXTBOX VALUE SO THAT I CAN
        // GET IT BACK AFTERWARDS
        var vbackup = $('#txtbox').val();
        alert(vbackup);
        if ($(this).is(":visible")) {
            // NO MATTERS...
        }
        else {
            // IF TEXTBOX VALUE IS EMPTY I GET THE PREVIOUS
            // VALUE BACK
            if ($('#txtbox').val() == '') {
                // VBACKUP IS EMPTY !!
                alert(vbackup );
                $('#txtbox').val(vbackup );
            }
        }
    });

    return false;
});

我不明白为什么我的 vbackup 变量与我之前备份的文本框实际值匹配。

http://jsfiddle.net/QFQ5k/16/

程序：

1. 按下按钮一次
2. 清空文本框
3. 再次按下按钮。现在“你好”这个词应该从变量返回到文本框。警报告诉我变量中的值已被覆盖。

Answer 1

请参阅更新的 http://jsfiddle.net/QFQ5k/21/

$('#mydiv').hide();
var vbackup = $('#txtbox').val();
$('#btn').click(function () {
        $('#mydiv').slideToggle('fast', function () {

            alert(vbackup);
            if ($(this).is(":visible")) {

            }
            else {
                if ($('#txtbox').val() == '') {
                    // In this alert vbackup
                    // is empty !!
                     $('#txtbox').val(vbackup );

                }
                else 
                    vbackup = $('#txtbox').val();
            }
        });

        return false;
    });

Answer 2

这样的事情（将值存储在 html 节点的属性中）也可以。另外，它不使用全局变量（耶）。

// this is equal to #mydiv
this.vbackup = $("#txtbox").val()

在此处查看演示：http: //jsfiddle.net/QFQ5k/25/

Answer 3

$("#mydiv").hide();

$('#btn').click(function () {
    $('#mydiv').slideToggle('fast', function () {
        var value = $('#txtbox').val() || $(this).data("value");

        if ( !$(this).is(":visible") && !$('#txtbox').val() ) {
            $('#txtbox').val( value );
        }

        $(this).data("value", value);
    });

    return false;
});

http://jsfiddle.net/QFQ5k/26/