返回前用变量填充javascript数组

Question

用变量填充JavaScript数组

旧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”：“}

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

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

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

旧JsFiddle

编辑：

我稍微更新了一下，现在效果更好了.但是，我需要从on事件中取出第一个变量，当我这样做时，它们不会加载。我希望能帮助找到解决这个问题的办法。

为了子孙后代:我改变了

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() ]);

新JsFiddle

Answer 1

新问题的原因是您的[PLACEHOLDER]文本在第一次单击generate时被覆盖。因此，以后的任何单击都没有要替换的文本。我建议您通过在类中使用spans来解决这个问题。我在你的小提琴上模拟了一个解决方案。

Answer 2

您的第一行表示您正在尝试创建一个二维数组，但是您的代码是用一个元素创建一个数组，该元素是一个对象，因为您已经编写了mapping.push( { ... } ) --请注意花括号。

相反，请使用：

var mapping = [
  [ie1, $( ".position" ).val()],
  [ie2, ...]
  ...
];

也就是说，您确实应该考虑数据的一些替代结构--这种带有数字后缀的硬编码变量的混乱表明，您应该使用数组和循环来构造数据。覆盖这些ieX变量的方式也令人困惑。