javascript - 返回前用变量填充 JavaScript 数组

Question

使用变量填充 JavaScript 数组

Old JsFiddle

我正在尝试创建一个如下所示的数组

//mapping array
var mapping = [
    [ "[POSITION]" , $( ".position" ).val() ],
    [ "[NAME]" , $( ".name" ).val() ],
    [ "[TOWN/DISTRICT]" , $( ".town" ).val() ],
    [ "[REGION]" , $( ".region" ).val() ],
    [ "[COUNTRY]" , $( ".country" ).val() ],
    [ "[HOG/HOS]" , $( ".hoghos" ).val() ],
    [ "[TOURIST ATTRACTION]" , $( ".tourist" ).val() ],
    [ "[SECTOR1]" , $( ".sector1" ).val() ],
    [ "[SECTOR2]" , $( ".sector2" ).val() ],
    [ "[SECTOR3]" , $( ".sector3" ).val() ],
    [ "[PITCHER]" , $( ".pitcher" ).val() ]
];

这里没有变量列表

//vars
var ie1 = "[POSITION]";
var ie2 = "[NAME]";
var ie3 = "[TOWN/DISTRICT]";
var ie4 = "[REGION]";
var ie5 = "[COUNTRY]";
var ie6 = "[HOG/HOS]";
var ie7 = "[TOURIST ATTRACTION]";
var ie8 = "[SECTOR1]";
var ie9 = "[SECTOR2]";
var ie10 = "[SECTOR3]";
var ie11 = "[PITCHER]";

我一直在尝试插入他们使用此代码

var mapping = [];

mapping.push({ ie1 : $( ".position" ).val() , ie2 : $( ".name" ).val() , ie3 : $( ".town" ).val() , ie4 : $( ".region" ).val() , ie5 : $( ".country" ).val() , ie6 : $( ".hoghos" ).val() , ie7 : $( ".tourist" ).val() , ie8 : $( ".sector1" ).val() , ie9 : $( ".sector2" ).val() , ie10 : $( ".sector3" ).val() , ie11 : $( ".pitcher" ).val() });

然后将使用它更新页面上的文本

$(".CYB").html(function(index,text){
    for (var i = 0; i < mapping.length; i++) {
        text = text.split(mapping[i][0]).join(mapping[i][1]);
    }
    return text;
});

此后，变量将更新为新值，因此无需刷新页面

//new vars
var ie1 = $( ".position" ).val();
var ie2 = $( ".name" ).val();
var ie3 = $( ".town" ).val();
var ie4 = $( ".region" ).val();
var ie5 = $( ".country" ).val();
var ie6 = $( ".hoghos" ).val();
var ie7 = $( ".tourist" ).val();
var ie8 = $( ".sector1" ).val();
var ie9 = $( ".sector2" ).val();
var ie10 = $( ".sector3" ).val();
var ie11 = $( ".pitcher" ).val();

当我发出警报时，很容易看出哪里出了问题

//alert with array
alert(JSON.stringify(mapping));

输出

[{ "ie1":"","ie2":"","ie3":"","ie4":"","ie5":"","ie6":"","ie7":"","ie8":"","ie9":"","ie10":"","ie11":""}]

它将变量视为文本而不是加载它们的值，但我不知道如何解决这个问题。

总而言之，我正在尝试达到一个阶段，可以将数据输入到文本框中并让它更新页面上的内容。如果我想进行更改，我希望能够通过保存我输入的变量并将它们加载到数组中来完成此操作，而无需刷新页面。

如果有任何帮助，我将不胜感激。

Old JsFiddle

编辑:

我稍微更新了它，现在工作得更正确了...但是我需要从单击事件中取出第一个变量，并且当我这样做时它们没有加载。如果您能帮助我找到此问题的解决方案，我将不胜感激。

为了子孙后代:我改变了

mapping.push({ ie1 : $( ".position" ).val() , ie2 : $( ".name" ).val() , ie3 : $( ".town" ).val() , ie4 : $( ".region" ).val() , ie5 : $( ".country" ).val() , ie6 : $( ".hoghos" ).val() , ie7 : $( ".tourist" ).val() , ie8 : $( ".sector1" ).val() , ie9 : $( ".sector2" ).val() , ie10 : $( ".sector3" ).val() , ie11 : $( ".pitcher" ).val() });

至

mapping.push([ ie1 , $( ".position" ).val() ],[ ie2 , $( ".name" ).val() ],[ ie3 , $( ".town" ).val() ],[ ie4 , $( ".region" ).val() ],[ ie5 , $( ".country" ).val() ],[ ie6 , $( ".hoghos" ).val() ],[ ie7 , $( ".tourist" ).val() ],[ ie8 , $( ".sector1" ).val() ],[ ie9 , $( ".sector2" ).val() ],[ ie10 , $( ".sector3" ).val() ],[ ie11 , $( ".pitcher" ).val() ]);

New JsFiddle

Answer 1

出现新问题的原因是您的 [PLACEHOLDER] 文本在您第一次单击“生成”时被覆盖。因此，任何 future 的点击都没有要替换的文本。我建议您通过将 spans 与类一起使用来解决这个问题。我已经在你的 jsfiddle 上模拟了一个解决方案.