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] 文本在您第一次单击生成时被覆盖。因此，以后的任何点击都没有要替换的文本。我建议您通过对类使用 spans 来解决这个问题。我在你的 jsfiddle 上模拟了一个解决方案.