javascript - .click 获取一段 json 以显示在警报中

Question

所以我有一个 get json 函数，可以使项目出现在我的页面上，有一个按钮，其中包含 json，当单击时，我希望该项目出现在警报中(称为购物车) - 它会是一个隐藏在页面准备/加载中的简单购物车。因此，当用户单击此按钮时，我的 json 文件的一部分会出现在警报内，例如购物车，如果可以总计来计算价格，这会很好，但不是必需的。

这是我获取 json 并将其显示在我的页面上的脚本:

 $.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 + 
        "' /><p class='lead text-justify'>" + products.appleitems[i].Information
        + "</p><div class='panel-footer'><button class='btn btn-primary btn-block' id='btncart'>&pound;" + products.appleitems[i].Price+"</button></div></div></div>";
    });

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

您会注意到，这是我正在谈论的按钮:

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

价格显示在按钮内部。

这是我的 json 文件中的一个片段(其中一个产品，总共大约有 12 个产品):

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

这是我希望在单击按钮时显示名称和价格的警报:

<div class="alert alert-warning" id="cart"></div>

这是我以前编写的脚本中的一些线索，当用户输入他们的姓名/登录详细信息(来自 json)并且他们匹配他们的姓名时，图片和详细信息将出现在欢迎警报中，我也此警报内有一个隐藏按钮，然后隐藏欢迎警报，这就是我让它工作的方式(可能与此仅 .show() 非常相似:

$(document).ready(function() {
//Hide alert when page loads
$("#loginalert").hide();
$("#invalid").hide();  
$("#loginbtn").click(function(event){

    $.getJSON('result.json', function(jd) {
        var id = $('#userName').val();
        var name = $('#userName2').val();
        var valid = false;


$('#loginalert').html('<img src="' + jd.user[i].imgpath + '"><br><p> Welcome: ' + jd.user[i].name + '</p><button type="button" id="btnhide" class="btn btn-primary btn-md">Hide</button>');      
          //show the alert after loading the information  
                $("#loginalert").stop().fadeIn('slow').animate({ opacity: 1.0 }, 3000)
                $('#invalid').hide();
                $('#btnhide').on('click', function(e){

                    e.preventDefault();
                    $('#loginalert').hide();
                });

            }
        }
        if (!valid) {
            $('#invalid').fadeIn('slow');
            $('#loginalert').hide();

亲切的问候

Answer 1

因此，在单击按钮时，您希望用其价格更新警报 div。

这是一个代码块，解释您需要的东西。

根据这个html

$('.btn-block').click(function(e){
      //alert($(this).attr("value")); //get value of button
      $("#cart").empty();  //clear div every time on click
      $("#cart").html($(this).attr("value")); //this will update div with value of button.
      var product_information = $(this).closest("div").prev("p").html();//This will get you product info 
});

我添加了一些解释作为评论。这是不言自明的。

重要

I notice you assign hardcore id in each loop in button which is not correct.You should always assign dynamic id as id cannot be same.