添加到列表中，而不是单击时替换内容

debugcn 发表于 Dev

Reemor

我正在创建一个比萨饼表单，该表单将通过按按钮显示客户所订购的商品。我的想法是，客户单击要订购的商品的大小，它将显示在侧面。

问题

我碰巧是JavaScript的新手，但是我不明白为什么当我单击按钮时，它们仅添加其中一项，而当我单击另一项时，它们却相互替换。我想更改它，以便可以无限点击它们。我也想知道我的代码是否有更高效率的版本。

<table>
      <tr id="top_border">
        <th>Pizzas</th><th>Small</th><th>Medium</th><th>Large</th>
      </tr>
      <tr>
        <td>Pepperoni</td><td><span onclick="ADDpps()">4.99</span></td><td>5.15</td><td>6.70</td>
     </tr>
     <tr>
        <td>Meat Lovers</td><td><span onclick="ADDmlps()">4.99</span></td><td>5.15</td><td>6.70</td>
     </tr>
     <tr>
        <td>Hawaiian</td><td><span onclick="ADDhps()">4.99</span></td>     <td>5.15</td><td>6.70</td>
     </tr>
</table>

输出

<ul id="items">
</ul>
<ul id="price">
</ul>

我尝试使用的Javascript

<script type="text/javascript">
var mlps= ["S - Meat lovers pizza","$4.99"];
function ADDmlps(){
    document.getElementById("items").innerHTML = mlps[0];
    document.getElementById("price").innerHTML = mlps[1];
}
var hps = ["S - Hawaiian Pizza","$4.99"];
function ADDhps(){
    document.getElementById("items").innerHTML = hps[0];
    document.getElementById("price").innerHTML = hps[1];
}
var pps = ["S - Pepperoni Pizza","$4.99"];
function ADDpps(){
    document.getElementById("items").innerHTML = pps[0];
    document.getElementById("price").innerHTML = pps[1];
}
</script>

网站设计者

问题是您通过设置替换了#items和的所有内容。您将要使用DOM添加一个新的每个函数调用。#priceinnerHTML<li><ul>

与其在存储类似数据的数据周围散布大量变量，不如让每个披萨在对象中都具有priceandname属性。然后，每个对象可以是数组中的一个项目：

var pizzas = [
  {
    name: "S - Meat lovers pizza",
    price: "$4.99"
  }
  // ...
];

您还希望将执行类似功能的函数压缩为1：

// call passing the index of the pizza in the pizzas array
function addPizza(index) {
  var pizza = pizzas[index];
  var name = pizza.name;
  var price = pizza.price;
  // now add an <li> to each <ul> with this info
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。