javascript - .click 将一段 json 添加到面板中

Question

我一直在拼命尝试让它发挥作用。

我知道除了我正在尝试的方式之外，可能还有更好的方法来做到这一点，但它是一项任务，必须以这种方式完成。

我正在创建一个简单的购物车/购物车不必添加总数，只需在面板内获取项目(如果有人知道如何添加价格也很好，但不是 100% 必要)

所以我已经使用 json 和 ajax 显示了 json 的项目，在准备好的页面上项目显示如此(大约有 12 个项目):

所以我隐藏了面板，当用户单击按钮(蓝色按钮)时，我希望 json 信息和 json 价格显示在面板内。

这是我的 json 文件(称为 result.json)中的其中一项的片段:

{
    "appleitems":[
        {
            "Product_id":"Iphone5",
            "Information":"Iphone 5 64GB",
            "Imgpath":"image/iphone5.jpg",
            "Price":"200.00"
        }
    ]
}

这是我的项目的显示方式:

$.getJSON('iproducts.json',function(products){
    var output = "";
    $.each(products.appleitems, function(i, product) { 

        output += 
            "<div class=\"col-xs-12 col-sm-6 col-md-3\"><div class='panel panel-default'><div class='panel-footer'><h4 class='text-center'>"  
            + products.appleitems[i].Product_id 
            + "</h4></div>" + "<img src ='" + products.appleitems[i].Imgpath + "'  style='width:100%;height:250px; display: block;' id='appleinfo_" 
            + products.appleitems[i].Product_id + "' /><h5 class='text-center'>"    + products.appleitems[i].Information
            + "</h5><div class='panel-footer'>`<button class='btn btn-primary btn-block' id='btnadd'>&pound;" + products.appleitems[i].Price+"</button>`</div></div></div>";
    });

    $("#container").html(output);
});

你会注意到我想要点击以显示 json 的按钮是 btnadd:

<button class='btn btn-primary btn-block' id='btnadd'>&pound;" + products.appleitems[i].Price+"</button>

所以当用户单击 btn add 时，我希望 json“信息”和“价格”显示在面板购物车中:

<div class="panel panel-default">
<div class="panel-body" id="cart"></div>

我已经为此启动了脚本:

$(document).ready(function() {
    //Hide alert when page loads
    $("#cart").hide();
    //get the item into the panel
    $("#btnadd").click(function(event){
        $.getJSON('result.json', function(add) {
           ...
        });
    });
});

Answer 1

首先，您对所有按钮(在循环内)具有相同的 Id 值。重复的 ID 无效。所以也许你可以删除它并为 jQuery 选择的按钮添加一个 css 类。此外，我建议将价格和信息保留在按钮上的 HTML5 数据属性中，以便于阅读。

var output ="";
$.each(products.appleitems, function(i, product) { 

   output += "<div><div>"

   output +="<button class='btn btn-primary btn-block addBtn' data-info='"+ 
          product.Price +"' data-price='"+
          product.Information +"'>&pound;" + product.Price+"</button>";

   output +="</div></div>";
});

并监听这个特定 css 类的 click 事件

$(function(){

  $(document).on("click",".addBtn",function(e){
    e.preventDefault();
    var _this=$(this);
    var c=_this.data("info") + " " +_this.data("price");
    $("#cart").html(c);
  });

});

Here是一个工作样本