如何使用可变字符串值来表示函数参数中的Javascript对象？

Question

老实说，我已经花了最后一周的时间进行搜索。 我怀疑我不知道要使用正确的搜索词，或者我要问的是不可能的。 不过，这似乎是一个常见的用例，因此可能是前者。

我正在创建一个页面，用户可以在其中从下拉菜单中选择其产品以查看软件要求。 我们有大量不同的可能产品，它们都具有相似的要求-因此我们想在它们之间重用价值。

我刚接触JavaScript，并且发现模板文字非常有用。 也许我过度使用它们是因为它们易于理解，但我也希望在这里使用它们。

为了简化此操作，我以“ cups”（而不是软件/硬件）为例。

首先，我们具有各种属性：

const color = {
  blue: "Blue",
  green: "Green"
};

const material = {
  plastic: "Hard Plastic",
  ceramic: "Glazed Ceramic",
};

const size = {
  oz_12: "12 ounces",
  oz_16: "16 ounces",
  oz_32: "32 ounces"
};

然后我为每个产品都有一个变量，例如：

const simple = {
  title: "Classic Cup Options",
  colors: `${color.blue}`,
  materials: `${material.ceramic}`,
  sizes: `${size.oz_12} and ${size.oz_16}`
}

最后，一个函数以我想要的格式返回我所有的变量：

function tableTemplate(data) {
  return `<div class="cup-prod-table"><h4>${data.title}</h4>
<table class="cup-table">
<tbody>
  <tr>
    <td>Colors</td>
    <td>${data.colors}</td>
</tr>
  <tr>
    <td>Materials</td>
    <td>${data.materials}</td>
</tr>
  <tr>
    <td>Sizes</td>
    <td>${data.sizes}</td>
</tr>
</tbody>
</table>
</div>`;
};

当我调用tableTemplate(simple) ，我得到了一个包含所有属性的HTML表。

然后，我有一个下拉菜单，其中包含每种可能的产品。 菜单值与常量名称相对应，因此：

  <select id="demoSelect">
    <option value="simple">Classic Cup</option>
    <option value="travel">Traveler's Cup</option>
    <option value="jumbo">Jumbo Cup</option>
  </select>

现在，我要一步tableTemplate操作，并为每个选择手动调用tableTemplate函数：

$("#demoSelect").on("change", function() {
  var str = "";
  $("#demoSelect option:selected").each(function() {
    str += $(this).val();
  });
  if (str == "simple") {
    $("#cupTables").prepend(tableTemplate(simple));
  } else if (str == "travel") {
    $("#cupTables").prepend(tableTemplate(travel));
  } else if (str == "jumbo") {
    $("#cupTables").prepend(tableTemplate(jumbo));
  }

});

（依此类推，但有25种产品变体）。

我希望能够做这样的事情，但不能

$("#demoSelect").on("change", function() {
  var str = "";
  $("#demoSelect option:selected").each(function() {
    str += $(this).val();
  });
    $("#cupTables").prepend(tableTemplate(str));

});

但是，尽管我还没有找到解决方法的答案，但是我b不休的搜索告诉我我无法做到这一点，因为我指向的是值（“ simple”）而不是引用（const simple = { }） （我认为？）

有解决方法吗？

除了模板文字外，我还能获得更好的运气吗？

这是一个带有示例的JSFiddle： https ://jsfiddle.net/cwow123/voq6dvt9/

Answer 1

与其将产品存储为一般事物中的变量，还不如将它们存储在称为产品的父对象下。

const products = {
  simple: {
    // ...
  },
  travel: {
    // ...
  },
  jumbo: {
    // ...
  }
}

现在，您可以通过存储在其下的密钥名称（它是一个字符串）来访问每种产品类型：

const product = products[str]
$("#cupTables").prepend(tableTemplate(product))