将字符串传递给函数但需要一个数组

Question

我有一个选择下拉菜单，我希望它在更改时运行一个函数并将选择的值传递给该函数。但是，该函数需要一个保存数组的变量，而传入的是一个字符串（选择的值）。

您可以在下面的代码中看到它工作（或不工作）。所选值应代表其对应的变量。

我怎样才能做到这一点？

var str = ["Paul", "John", "Melissa", "Mike"];
var int = [8, 4, 55, 7];
var mix = ["Paul", 9, "John", 5, "Melissa", 67, "Mike", 2];

var main = document.querySelector('#main');
var sel = document.querySelector('select');


function testFunc(arr){
  arr.forEach((i) => {
    var p = document.createElement('p');
    p.innerHTML = i;
    main.appendChild(p);
  });
}

testFunc(mix);

sel.addEventListener('change', testFunc(sel.value));

<select>
  <option value="str">String</option>
  <option value="int">Integer</option>
  <option value="mix">Mixed</option>
</select>

<div id="main"></div>

编辑：

我应该注意到，数据数组是动态输入的，我真的很想避免对它们进行操作，以免在以后的编辑中造成额外的代码和混乱。

Answer 1

您的代码中有两个问题：

1. 在事件处理函数中，通过在函数后面指定括号，您将在页面加载时调用该函数。只需在函数体内调用函数即可。这将使函数仅在事件触发时被调用。

2. sel.value 是一个字符串，但该函数需要一个数组。要动态评估数组，请将 testFunc(mix) 更改为 testFunc('mix')（将参数值用引号括起来）并使用 window 对象，例如：

   arr = window[arr]
   

替换：

sel.addEventListener('change', testFunc(sel.value));

有

sel.addEventListener('change', function (){testFunc([sel.value])});

var str = ["Paul", "John", "Melissa", "Mike"];
var int = [8, 4, 55, 7];
var mix = ["Paul", 9, "John", 5, "Melissa", 67, "Mike", 2];

var main = document.querySelector('#main');
var sel = document.querySelector('select');


function testFunc(arr){
  arr = window[arr]
  arr.forEach((i) => {
    var p = document.createElement('p');
    p.innerHTML = i;
    main.appendChild(p);
  });
}

testFunc('mix');

sel.addEventListener('change', function (){testFunc(sel.value)});

<select>
  <option value="str">String</option>
  <option value="int">Integer</option>
  <option value="mix">Mixed</option>
</select>

<div id="main"></div>

Answer 2

据我了解，您想这样做：

let model = {
    str : ["Paul", "John", "Melissa", "Mike"];
    int : [8, 4, 55, 7];
    mix : ["Paul", 9, "John", 5, "Melissa", 67, "Mike", 2];
}


function testFunc(key){
    var arr = []
    if(model[key]){
        arr = model[key]
    }


    //TODO: clear parent node...
    arr.forEach((i) => {
        var p = document.createElement('p');
        p.innerHTML = i;
        main.appendChild(p);
    });
}

Answer 3

arr = eval(arr);

var str = ["Paul", "John", "Melissa", "Mike"];
var int = [8, 4, 55, 7];
var mix = ["Paul", 9, "John", 5, "Melissa", 67, "Mike", 2];

var main = document.querySelector('#main');
var sel = document.querySelector('select');


function testFunc(arr){
  arr = eval(arr);
  arr.forEach((i) => {
    var p = document.createElement('p');
    p.innerHTML = i;
    main.appendChild(p);
  });
}

testFunc(mix);

sel.addEventListener('change', function(){testFunc(this.value)});

<select>
  <option value="str">String</option>
  <option value="int">Integer</option>
  <option value="mix">Mixed</option>
</select>

<div id="main"></div>

Answer 4

有几点需要改变：

• 不要调用传递给addEventListener 方法的函数。而是传递一个函数引用。它可以是内联函数表达式。但不要这样称呼它。

• 使您的不同数组属性成为一个对象变量，以便您可以根据所选值轻松引用它们。

• 在更改选择时清除输出。

• 根据页面加载时选择的项目触发初始更改。

这是一个工作版本：

var arr = {
    str: ["Paul", "John", "Melissa", "Mike"],
    int: [8, 4, 55, 7],
    mix: ["Paul", 9, "John", 5, "Melissa", 67, "Mike", 2]
};

var main = document.querySelector('#main');
var sel = document.querySelector('select');

function testFunc(arr){
  main.innerHTML = ""; // clear the previous result
  arr.forEach((i) => {
    var p = document.createElement('p');
    p.innerHTML = i;
    main.appendChild(p);
  });
}

sel.addEventListener('change', () => testFunc(arr[sel.value]));
testFunc(arr[sel.value]); // initial load

<select>
  <option value="str">String</option>
  <option value="int">Integer</option>
  <option value="mix">Mixed</option>
</select>

<div id="main"></div>

如果您的数组是在全局范围内定义的，而您对此无能为力，则只需在新对象中复制对它们的引用即可：

// Defined beforehand: you cannot change this:
var str = ["Paul", "John", "Melissa", "Mike"],
var int = [8, 4, 55, 7],
var mix = ["Paul", 9, "John", 5, "Melissa", 67, "Mike", 2]

// In your part of the code, still create array as in above solution:
var arr = {str: str, int: int, mix: mix};
// If you have ES6 support you can shorten the above to:
var arr = {str, int, mix};

Answer 5

如果我没有误解您的要求，那么您必须对现有的 JS 变量进行轻微更改，并将其更改为 Object。之后尝试以这种方式在下拉菜单的每个更改event 上附加新的段落元素，方法是删除现有的main.innerHTML=''

addEventListener：https://developer.mozilla.org/en-US/docs/Web/Events/change

对象结构：https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics

var data_types = {
  str: ["Paul", "John", "Melissa", "Mike"],
  int: [8, 4, 55, 7],
  mix: ["Paul", 9, "John", 5, "Melissa", 67, "Mike", 2]
}

var main = document.querySelector('#main');
var sel = document.querySelector('select');


function testFunc(event) {
   main.innerHTML = '';
  // You can use “this” to refer to the selected element.
  if (!event.target.value) alert('Please Select One');
  var arr = data_types[event.target.value];
  arr.forEach((i) => {
    var p = document.createElement('p');
    p.innerHTML = i;
    main.appendChild(p);
  });
}
  
document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('select[name="data-types"]').onchange = testFunc;
}, false);

<select name="data-types">
  <option value="str">String</option>
  <option value="int">Integer</option>
  <option value="mix">Mixed</option>
</select>

<div id="main"></div>