使用变量

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

你的第一行说你正在尝试创建一个二维数组，但是你的代码正在创建一个包含单个元素的数组，这个元素是对象，因为你写了{{1} } - 注意大括号。

相反，请使用：

mapping.push( { ... } )

那就是说，你真的应该为你的数据考虑一些替代结构 - 这一堆带有数字后缀的硬编码变量表明你应该使用数组和循环来构建你的数据。你覆盖那些var mapping = [ [ie1, $( ".position" ).val()], [ie2, ...] ... ];变量的方式也令人困惑。

Answer 2

出现新问题的原因是您第一次点击生成时[PLACEHOLDER]文字被覆盖。因此，任何未来的点击都没有要替换的文本。我建议您通过在课程中使用spans来解决这个问题。我已经在你的jsfiddle上嘲笑了一个解决方案。

在返回之前使用变量填充javascript数组

使用变量

Old JsFiddle

Old JsFiddle

编辑：

New JsFiddle

2 个答案: