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

Question

我正在创建一个比萨饼表单，它会通过按下按钮显示客户订购的商品。我的想法是客户点击他们想要订购的商品尺寸，它就会显示在旁边。

问题

我碰巧是 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",".99"];
function ADDmlps(){
    document.getElementById("items").innerHTML = mlps[0];
    document.getElementById("price").innerHTML = mlps[1];
}
var hps = ["S - Hawaiian Pizza",".99"];
function ADDhps(){
    document.getElementById("items").innerHTML = hps[0];
    document.getElementById("price").innerHTML = hps[1];
}
var pps = ["S - Pepperoni Pizza",".99"];
function ADDpps(){
    document.getElementById("items").innerHTML = pps[0];
    document.getElementById("price").innerHTML = pps[1];
}
</script>

Answer 1

问题是您通过设置 innerHTML 替换了 #items 和 #price div 的所有内容。您需要使用 DOM 在每个函数调用中将 new <li> 添加到 <ul>。

与其让大量变量存储相似的数据，不如让每个披萨在一个对象中有一个 price 和 name 属性。然后每个对象可以是数组中的一个项目：

var pizzas = [
  {
    name: "S - Meat lovers pizza",
    price: ".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
}

Answer 2

尝试在每次点击时添加一个新的 <li> 而不是替换整个列表的 innerHTML。

像这样的开始怎么样：

var mlps= ["S - Meat lovers pizza",".99"];
function ADDmlps(){
  createItem(mlps[0], mlps[1]);
}
var hps = ["S - Hawaiian Pizza",".99"];
function ADDhps(){
  createItem(hps[0], hps[1]);
}
var pps = ["S - Pepperoni Pizza",".99"];
function ADDpps(){
  createItem(pps[0], pps[1]);
}

function createItem(item, price) {
  var itemLi = document.createElement('li');
  itemLi.class = "item";
  itemLi.innerHTML = item + " : " + price;
  
  document.getElementById("items").appendChild(itemLi);
}

<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>

Answer 3

基本上它会发生，因为您使用等号 (=) 替换了变量 .innerHTML.

的全部内容

var a = "test";
a = "2"; // 2
a = "3"; // 3

// vs.

var b = "test";
b += "2"; // test2
b += "3"; // test23

此外，您可能希望使用实际的 button HTML 元素，而不是将此操作添加到 span。使用 non-button 元素来定义操作可能会使某些用户感到困惑或破坏功能。

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

Add to list instead of replacing contents on click

javascript

html

document.write

问题