在 jQuery 中使用值作为变量名

Question

我有几个div...  <div id="foo"></div>  <div id="bar"></div>每个都有一个关联的 jQuery 数组。例如。var foo_array = ["One", "Two", "Three"];var bar_array = ["Four", "Five", "Six"];当我点击 div 时，我想提醒相关数组中的第一个值。所以像：$(div).on("click",function(){   $divid = $(this).attr("id");   $firstval = ????_array[0];   alert($firstval);})- 在哪里而不是 ???? 我动态地回显 $divid 的值。在 PHP 中很容易，但我很困惑如何在 javascript 中做到这一点？

Answer 1

在一个更大的对象中定义数组，而不是有多个独立变量，然后你可以只使用属性查找：

const divArrs = {

  foo: ["One", "Two", "Three"],

  bar: ["Four", "Five", "Six"]

}

$('div').on("click", function() {

  divid = $(this).attr("id");

  const firstval = divArrs[divid][0];

  console.log(firstval);

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="foo">foo</div>

<div id="bar">bar</div>

当然，像这样的事情不需要 jQuery：

const divArrs = {

  foo: ["One", "Two", "Three"],

  bar: ["Four", "Five", "Six"]

};

document.querySelectorAll('div').forEach((div) => {

  div.onclick = () => {

    console.log(divArrs[div.id][0]);

  };

});

<div id="foo">foo</div>

<div id="bar">bar</div>

Answer 2

全局定义的变量和 withvar可以在window对象中自动访问。

var foo_array = ["One", "Two", "Three"];

var bar_array = ["Four", "Five", "Six"];

const id = "foo";

console.log(window[`${id}_array`][0]);