Question

我正在尝试根据所选选项动态实例化JS对象。我的HTML看起来像

<select class="klass">
  <option value="Klass1">1</option>
  <option value="Klass2">2</option>
  <option value="Klass3">3</option>
</select>

这是我的JS（到目前为止）

let elements = [1,2,3]
let klass_name = document.querySelector('.klass').value
let klass = new ???(elements)
console.log(klass.params())



export default class Klass1 {
  constructor(elements) {
    this.elements = elements
  }

  params() {
    return "lorem"
  }
}

export default class Klass2 {
  constructor(elements) {
    this.elements = elements
  }

  params() {
    return "ipsum"
  }
}

export default class Klass3 {
  constructor(elements) {
    this.elements = elements
  }

  params() {
    return "this is very comPLEex@"
  }
}

我应该将???替换为什么？

如果我不必预先定义JS中所有可能的选项，那就太好了。

我不是要更改类，而是要实例化此类的对象。

Answer 1

它正在构建一个字典，在该字典中您可以从与要创建的类相关的选择中检索到的值。因此，Klasses [klass_name]返回要创建的类。

const Klasses = {
  Klass1: class Klass1 {
    constructor(elements) {
      this.elements = elements
    }

    params() {
      return "1"
    }
  },
  Klass2: class Klass2 {
    constructor(elements) {
      this.elements = elements
    }

    params() {
      return "2"
    }
  }
};

let elements = [1, 2, 3]
let klass_name = document.querySelector('.klass').value
const klass = new Klasses[klass_name]();
console.log(klass.params());

<select class="klass">
  <option value="Klass1">1</option>
  <option value="Klass2">2</option>
  <option value="Klass3">3</option>
</select>

Answer 2

您可以使用以下方法来代替为每个容器创建函数： var x = document.getElementById（“ mySelect”）。value;

x将包含您的选项的值（此处为klass1、2或3）那么您只需获取最后一个字符（或在可能的情况下更改选项的值）

从类名称字符串实例化一个对象

2 个答案: