.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 添加时，我希望 json “信息”和“价格”显示在面板内 cart：

<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 是一个工作示例