.click 获取一段 json 以显示在警报中答案

【问题标题】：.click get a piece of json to appear inside an alert.click 获取一段 json 以显示在警报中
【发布时间】：2015-12-18 00:42:31
【问题描述】：

所以我有一个 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();

亲切的问候

【问题讨论】：

请重新格式化您的问题，因为目前很难阅读。也请检查我的回答。

标签： javascript jquery json

【解决方案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 
});

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

重要

我注意到您在按钮的每个循环中分配了不正确的核心 id。您应该始终分配动态 id，因为 id 不能相同。

【讨论】：