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 
});

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

重要

我注意到你在按钮中的每个循环中分配了不正确的硬核ID。你应该总是分配动态id，因为id不能相同。

.click让一条json出现在警报

1 个答案:

重要