在for循环中生成变量

Generating variables in a for loop javascript

本文关键字：变量 for 循环      更新时间：2023-09-26

我有一个很长的变量列表，像这样

container = document.getElementById('container_dc');
content = document.getElementById('content_dc');
unexpClickthrough = document.getElementById('unexpClickthrough');
expandedBgExit = document.getElementById('expanded_background_exit_dc');
vidContainer = document.getElementById('video_container_dc');
vid = document.getElementById('video_dc');
vidPlayBtn = document.getElementById('video_control_play_dc');
vidPauseBtn = document.getElementById('video_control_pause_dc');
vidStopBtn = document.getElementById('video_control_stop_dc');
vidReplayBtn = document.getElementById('video_control_replay_dc');
vidUnmuteBtn = document.getElementById('video_control_unmute_dc');
vidMuteBtn = document.getElementById('video_control_mute_dc');
close_btn = document.getElementById('close_btn_dc');
expand_content =  document.getElementById('expand_content_dc');
mainImage = document.getElementById('mainImage');
vertBar_1 = document.getElementById('vertBar_1');
vertBar_2 = document.getElementById('vertBar_2');
vertBar_3 = document.getElementById('vertBar_3');
vertBar_4 = document.getElementById('vertBar_4');
vertBar_5 = document.getElementById('vertBar_5');
vertBar_6 = document.getElementById('vertBar_6');
headline = document.getElementById('headline');
darkener = document.getElementById('darkener');
gradBar = document.getElementById('gradBar');
txt_forToday = document.getElementById('txt_forToday');
stat1 = document.getElementById('stat1');
stat2 = document.getElementById('stat2');
stat3 = document.getElementById('stat3');
stat4 = document.getElementById('stat4');
divider1 = document.getElementById('divider1');
divider2 = document.getElementById('divider2');
divider3 = document.getElementById('divider3');
cta = document.getElementById('cta');
downArrow = document.getElementById('downArrow');
vidPanelBg = document.getElementById('vidPanelBg');
vidPanelCopy = document.getElementById('vidPanelCopy');
legalBut = document.getElementById('legalBut');
legalButExp = document.getElementById('legalButExp');
legalsPanel = document.getElementById('legalsPanel');
legalsPanelExp = document.getElementById('legalsPanelExp');

我想通过使用for循环来缩短它。有没有办法在一个for循环中复制这个而不创建一个对象给他们站点?问题是我需要这些变量名保持不变

唯一的冗余是对document.getElementById()的重复调用。这些元素的id是信息:你不能去掉它们。像这样做:

elementIds = ['container_dc', 'content_dc', ...];
for (var i = 0; i < elementIds.length; i++) {
    var id = elementIds[i];
    window[id] = document.findElementById(id); # same as global var
}
console.log(content_dc) // access them like this
另一方面，您需要从文档中获取这么多元素，这让我感到很奇怪。这是不常见的:也许你应该考虑一个设计，不需要Javascript操作这么多的页面元素。

你拿起很多容器，例如，这是罕见的:通常，这些是为了布局的目的，你在CSS中提到它们，但只与你的脚本中保存动态信息的元素交互。

您可以创建一个变量名数组，然后使用window对象遍历它们以构建赋值:

var ary = ['vertBar_1', 'vertBar_2', 'vertBar_3'];
for (var i = 0; i < ary.length; i++) {
    window[ary[i]] = document.getElementById(ary[i]);
}
console.log(vertBar_1, vertBar_2, vertBar_3)
相关文章：