Question

我有一个客户必须选择的产品列表。单击该项目，它将显示在您可以看到名称和价格的页面上。

我可以显示所选的项目但是没有按照我想要的方式进行安排。当我选择一个项目时，它显示为

Item : Facebook

Price :190

当我选择下一个项目时，它显示为

Item : Facebook

Item : Google

Price :190

Price: 100

我如何按照

的顺序排列它们

Item : Facebook

Price :190

Item : Google

Price: 100

HTML

<div class="container" id="container">
  <p class="name"></p>
  <p class="amount"></p>
</div>

JS

单击按钮时

 $(".name").append(' Item : ' +item.name);  
 $(".amount").append('Price :' +item.amount);

Answer 1

您需要使用数据填充父容器。现在，您只需将名称添加到p.name中，并将其添加到p.amount

尝试将另一个p.name和p.amount添加到父容器中。

$("#container").append("<p class=\"name\">"+item.name+"</p><p class=\"amount\">"+item.amount+"</p>");

Answer 2

将其添加为完整字符串并将其附加到容器

＆＃13;

$('#button').click(function(){
   $(".container").append('<p class="name">Name:Facebook</p><p class="amount">Price:30</p>');  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">click</button>
<div class="container" id="container">
<p class="name"></p>
<p class="amount"></p>
</div>

＆＃13;

Answer 3

要获得所需的格式，您需要创建两个新的<p>元素并将其附加到容器中，而不是将内容附加到现有段落中。

＆＃13;

$(function() {
  var item = {
    "name": "Google",
    "amount": "100"
  };

  $("#container").append(
    $("<p>", {
      "class": "name",
      "text": ' Item : ' + item.name
    }),
    $("<p>", {
      "class": "amount",
      "text": ' Price : ' + item.amount
    })
  );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="container">
  <p class="name">Item: Facebook</p>
  <p class="amount">Price: 190</p>

＆＃13;

Answer 4

您可以尝试在div中添加新段落，如下所示：

示例：

function addItem() {
    document.getElementById("container").innerHTML += '<p>Item : ' +item.name + '</p>';
    document.getElementById("container").innerHTML += '<p>Price :' +item.amount + '</p>';
}

使用Javascript预加载数据

4 个答案: