javascript - 在 JavaScript 中将元素的属性与数组名称匹配

Question

这个问题已经有答案了:

Get variable from a string (5 个回答)

已关闭 9 年前。

我正在处理一个具有多个列表的页面:

<ul class="policies" id="p-1">
  <li><a href="p_1_1">Foo</a></li>
  <li><a href="p_1_2">Foo2</a></li>
</ul>
<ul class="policies" id="p-2">
  <li><a href="p_2_1">Foo</a></li>
  <li><a href="p_2_2">Foo2</a></li>
</ul>

其中每一个 href s 有一个具有匹配名称的数组:

var p_1_1 = ['ab', 'az', 'tx', 'wz'];
var p_1_2 = ['av', 'bq', 'cf', 'ts'];

每当用户单击其中一个列表项时，我都会使用 JavaScript/jQuery 将动态数量的图像附加到空 div 中。图像的来源将从数组项中获取:

$('li a').on('click', function(e) {
  e.preventDefault();
  var useArray = $(this).attr('href').toString();
} );

for ( var i=0; i < array.length; i++ ) {
  $('div').append('<img src="'+ array[i] +'" />');
}

我的问题是，如何匹配 href属性到正确的数组名称以便输出正确的项目集？例如，当用户单击<a href="p_1_1">时，我需要输出数组 p_1_1 中的项目。我在 JavaScript 中使用数组的经验非常有限，非常感谢有关该主题的任何帮助。

Answer 1

不要使用单独的数组，而是使用字符串作为键将它们全部包装在一个对象中:

var myStuff = {
    p_1_1 : ['ab', 'az', 'tx', 'wz'],
    p_1_2 : ['av', 'bq', 'cf', 'ts']
};

现在您可以通过以下方式轻松检索它们:

var foo = myStuff["p_1_1"];

或者在您的代码中:

var useArray = $(this).attr('href').toString();
var array = myStuff[useArray];