无法让 JavaScript 将 ID 读取为变量名

Question

可能重复：
Javascript 中的字符串形式的变量名

我想做的是有一个输入字段来编辑一些信息。我将其设置为，随着每个字段的更改（文本框和复选框的组合），AJAX会更新信息并在配置文件框中显示更改（服务器负载很低，不关心效率）。如果用户点击Escape，我希望文本框中的值恢复为原始值（如果他们正在编辑他们改变主意的字段）。对于文本框，我遇到了一个可变的问题——我知道我可以使用数组或隐藏字段，但现在我想知道如何使这个版本工作：）

我设置了我的变量：

 var first_name = "' || i.instructor_fname || '";

我有我的输入字段：

<input type="text" id="first_name" value="' || i.instructor_fname ||'">

和Escape功能：

if (e.keyCode == 27) { 
   if (document.activeElement.id != "" ) {
       $("#" + document.activeElement.id)
                 .val(document.activeElement.id);
   }
}

对于first_name，输出为first_name。该值设置正确，因为文本框填充正确。我似乎没有将"first_name"作为变量读取，而是作为字符串读取。我尝试过几种将文字与之结合的组合，但仍然没有成功。有什么想法吗？同样，我知道我可以使用其他技术来实现这一点，但似乎弄清楚这一点可能会对其他项目派上用场。

Answer 1

我不确定我是否理解，但也许您需要在document.activeElement.id.上调用eval（）

Answer 2

我也不确定自己是否理解，但这有多近？

http://jsfiddle.net/PXcD8/

html:

<input type="text" id="foobar">

js:

$(function()
{
    $(':text').each(function()
    {
        var text = $(this);
        text.keyup(function(event)
        {
            if (event.which == 27)
                reset_textbox();
        });
        reset_textbox();
        function reset_textbox()
        {
                text.val(text.attr('id'));            
        }
    });
});

这将把一个文本字段的文本设置为与初始id相同的值，当用户按下escape使其聚焦时。

Answer 3

更合适的解决方案是创建field_id -> value映射。这可以很容易地用对象完成：

var field_values = {
    first_name: "' || i.instructor_fname || '",
    last_name: "...',
    // ...
};

然后你可以简单地使用括号符号来获得值：

$("#" + document.activeElement.id)
    .val(field_values[document.activeElement.id]);

假设执行的处理程序绑定到要修改的元素，那么代码就变得简单如下：

$(this).val(field_values[this.id]);

Answer 4

如果您正在寻找替代解决方案，为什么不简单地在输入中包含默认值属性呢。

<input type="text" id="first_name" value="' || i.instructor_fname ||'"
    default-value="' || i.instructor_fname ||'" />

然后在您的Escape密钥处理程序中

if (e.keyCode == 27) if (document.activeElement.id != "" ) {
    var e = $("#" + document.activeElement.id);
    e.val(e.attr('default-value'));
}

就我个人而言，这感觉比javascript变量浮动更优雅/更干净。

此外

假设默认值始终与输入元素的初始值认值属性）。

<input type="text" id="first_name" value="' || i.instructor_fname ||'" />​

您只需要以下启动脚本

$(document).ready(function() {
    $('input').each(function() {
        var e = $(this);
        e.attr('default-value', e.val());
    });
})