“的Javascript闭包”；“缓存”；texbox值

我为下面的代码创建了一个。我试图实现的是在单击第一个按钮时始终获取“First textbox”的值，而不是在单击第二个按钮时获取“Second textbox”的实际值，但我无法做到这一点。关于如何做有什么帮助吗

Javascript

  var mapping = function (id, refresh) {
     var ret = $(document.getElementById(id)).val(),
         func = function (refresh) {
             if (refresh) ret = $(document.getElementById(id)).text();
             return ret;
         };

     return {
         func: func
     };
 };

 var foo = {
     firstElement: function (refresh) {
         return new mapping('firstTextbox', refresh);
     },

     secondElement: function (refresh) {
         return new mapping('secondTextbox', refresh);
     }
 };

 $(document).ready(function () {
     $('#firstButton').on('click', function () {
         $('#container').html(foo.firstElement(false));
     });

     $('#secondButton').on('click', function () {
         $('#container').html(foo.secondElement(true));
     });
 });

Html

第一个按钮


第二个按钮


结果来了

谢谢

---

此外，在fiddle中，foo对象中的两个元素中碰巧都有“firstTextBox”字符串。

每次单击时，您都会调用

foo（）

，它确实创建了一个新的

映射

——从现在开始可能不会刷新，但每次都会用当前值初始化。改用这个：

$(document).ready(function () {
    var getFirstElement = mapping('firstTextbox', false);
    var getSecondElement = mapping('secondTextbox', true);

    $('#firstButton').on('click', function () {
        $('#container').html(getFirstElement.func());
    });

    $('#secondButton').on('click', function () {
        $('#container').html(getSecondElement.func());
    });
});

---

您的填充和代码是不同的。当函数不是构造函数而是返回对象文本时，您不应该使用

new

。还要注意，您的

firstElement

和

secondElement

变量是不可释放的全局变量。您是对的，但您的示例仍然会出错。谢谢

$('#firstButton').on('click', function () {
     $('#container').text(foo.firstElement(false).func);
 });

 $('#secondButton').on('click', function () {
     $('#container').text(foo.secondElement(true).func);
 });

$(document).ready(function () {
    var getFirstElement = mapping('firstTextbox', false);
    var getSecondElement = mapping('secondTextbox', true);

    $('#firstButton').on('click', function () {
        $('#container').html(getFirstElement.func());
    });

    $('#secondButton').on('click', function () {
        $('#container').html(getSecondElement.func());
    });
});