我正在使用静态function MyMethod(formSubmit)
{
formSubmit.submit();
}
$('#Btn').on('click', function(e)
{
e.preventDefault();
var form = $(this).parent();
MyMethod(form);
})
文件作为数据源构建购物车。现在，当我的数据被提取时，只有图像呈现而不是其他数据，如价格和文本，如产品名称。
这是我的代码：
JSON这是我的静态$(document).ready(function() {
$.getJSON('feed.json')
.done(function(data) {
// Define wine bottle Variables.
var allBooks = [];
var x = 0;
$.each(data.books, function(key, value) {
x++;
allBooks.push(
"<div class='col-sm-12 col-md-8 col-lg-4 thumbnail products'>" +
"<h3>" + data.books[key].title + "</h3>" + "<img class='bottles' src='" + data.books[key].imageUrl + "'>" + "<p id='" + x + "'>$" + data.books[key].price + ".00</p>" + "<input type='button' class='" + x + " btn btn-success' value='Add to Cart'>" + "</div>"
);
});
var emptyCart = document.createElement("input");
emptyCart.setAttribute("class", "btn btn-danger empty");
emptyCart.setAttribute("type", "button");
emptyCart.setAttribute("value", "Empty Cart");
var empty = document.getElementById("empty");
empty.appendChild(emptyCart);
$("#books").html(allBooks);
// Cart functionality
$('#empty').hide();
var myCart = 0;
var price = 0;
var cartContent = document.getElementById("cartContent");
var cartValue = document.getElementById("cartValue");
var priceArr = [];
cartContent.innerHTML = myCart;
cartValue.innerHTML = "$ " + price + ".00";
$(".0").click(function() {
var item = document.getElementById(0).innerHTML;
priceArr.push(parseFloat(item.substring(1, item.length)));
price = priceArr.reduce(function(prev, current) {
return prev + current
})
$('#empty').fadeIn(300);
myCart = priceArr.length;
cartContent.innerHTML = myCart;
cartValue.innerHTML = "$ " + price + ".00";
});
$(".1").click(function() {
var item = document.getElementById(1).innerHTML;
priceArr.push(parseFloat(item.substring(1, item.length)));
price = priceArr.reduce(function(prev, current) {
return prev + current
})
$('#empty').fadeIn(300);
myCart = priceArr.length;
cartContent.innerHTML = myCart;
cartValue.innerHTML = "$ " + price + ".00";
});
$(".2").click(function() {
var item = document.getElementById(2).innerHTML;
priceArr.push(parseFloat(item.substring(1, item.length)));
price = priceArr.reduce(function(prev, current) {
return prev + current
})
$('#empty').fadeIn(300);
myCart = priceArr.length;
cartContent.innerHTML = myCart;
cartValue.innerHTML = "$ " + price + ".00";
});
$(".3").click(function() {
var item = document.getElementById(3).innerHTML;
priceArr.push(parseFloat(item.substring(1, item.length)));
price = priceArr.reduce(function(prev, current) {
return prev + current
})
$('#empty').fadeIn(300);
myCart = priceArr.length;
cartContent.innerHTML = myCart;
cartValue.innerHTML = "$ " + price + ".00";
});
// empty cart
$("#empty").click(function() {
myCart = 0;
price = 0;
priceArr = [];
cartContent.innerHTML = myCart;
cartValue.innerHTML = "$ " + price + ".00";
$("#empty").fadeOut(400);
})
})
.fail(function(error) {
console.log("error" + error)
})
.always(function() {
console.log("finished")
});
})
：
JSON为了呈现剩余的{
"books":[
{
"title": "Brediecker",
"price": 23,
"imageUrl": "images/wine.png"
},
{
"title": "Chardonnay",
"price": 19,
"imageUrl": "images/growse.jpg"
},
{
"title": "Gewurztraminer",
"price": 26,
"imageUrl": "images/riesling.jpg"
},
{
"title": "Pinot",
"price": 215,
"imageUrl": "images/pinot.jpg"
},
{
"title": "Pinot",
"price": 215,
"imageUrl": "images/pinot.jpg"
}
]
}
数据，我缺少什么？
答案 0 :(得分：0)
您还可以通过value.title，value.price等访问字段。
var allBooks = [];
var x = 0;
$.each(data.books, function(key, value) {
x++;
allBooks.push(
"<div class='col-sm-12 col-md-8 col-lg-4 thumbnail products'>" +
"<h3>" + value.title + "</h3>" + "<img class='bottles' src='" + value.imageUrl + "'>" + "<p id='" + x + "'>$" + value.price + ".00</p>" + "<input type='button' class='" + x + " btn btn-success' value='Add to Cart'>" + "</div>"
);
});
这是一个可以玩的jsFiddle：https://jsfiddle.net/tqxLaom7/2/ 您可以在控制台中看到输出。
您应该使用浏览器的调试工具检查您获得的对象。 以下是一般性解释：http://www.w3schools.com/Js/js_debugging.asp
根据您使用的浏览器，您可以阅读有关如何使用开发人员工具的更多信息。