0

老实说，我上周一直在寻找这个。我怀疑我不知道要使用的正确搜索词，或者我要问的可能是不可能的。不过，这似乎是一个常见的用例，所以它可能是前者。

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

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

为了简化这一点，我以“杯子”而不是软件/硬件为例。

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

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为每个选择手动调用该函数：

$("#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));

});

但是虽然我还没有找到如何做的答案，但我笨拙的搜索告诉我我不能这样做，因为我指向一个值（“简单”）而不是一个引用（const simple = { }） （我认为？）

有解决方法吗？

使用模板文字以外的东西会更好吗？

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

4

1 回答 1

1

与其将您的产品仅作为变量存储在事物的一般范围内，不如将它们键入一个名为 products 的父对象下。

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

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

const product = products[str]
$("#cupTables").prepend(tableTemplate(product))
于 2018-01-25T03:08:11.823 回答