关于我需要解决的问题，我有3个问题：
如何在另一个循环中创建循环以从price_history文件获取.json并使用priceHistoryModal变量中的模板后面的7个结果填充模态？
我已经尝试了一些方法，但所有方法都让我undefined。
只有“click”上的第一个按钮“价格历史记录”同时显示所有模态<div>。我怎样才能打开他的父模态（在同一个<article>内）？
为什么最后一个模态不关闭？与按钮相同，只是第一个调用模态。
这是.json文件：
{
"hotels": [
{
"name": "Super 8 Speedway/University",
"description": "Just off Interstate 85, this hotel features free Wi-Fi and a daily continental breakfast with hot waffles. The Charlotte Motor Speedway is a 15 minute drive from the hotel.",
"image": "http://www.raphaelfabeni.com.br/rv/test-resources/hotels/super-8.jpg",
"rate": 3,
"price": 180,
"price_history": [
{ "month": "Jan", "value": 146 },
{ "month": "Feb", "value": 182 },
{ "month": "Mar", "value": 130 },
{ "month": "Apr", "value": 119 },
{ "month": "May", "value": 171 },
{ "month": "Jun", "value": 154 },
{ "month": "Jul", "value": 163 }
]
},
{
"name": "Omni Charlotte Hotel",
"description": "The Omni Charlotte Hotel envelopes you in ultimate comfort with a signature touch of genuine North Carolina hospitality.",
"image": "http://www.raphaelfabeni.com.br/rv/test-resources/hotels/omni-charlotte.jpg",
"rate": 4,
"price": 280.50,
"price_history": [
{ "month": "Jan", "value": 302 },
{ "month": "Feb", "value": 219 },
{ "month": "Mar", "value": 300 },
{ "month": "Apr", "value": 229 },
{ "month": "May", "value": 272 },
{ "month": "Jun", "value": 249 },
{ "month": "Jul", "value": 239 }
]
}
.js文件与我的问题部分：
$(".searchHotels").on('click', function() {
//Get JSON Data
$.getJSON('http://www.raphaelfabeni.com.br/rv/hotels.json', function(data) {
//Start loop
$.each(data.hotels, function(k, v) {
//Stars rating template
var span = '<span id="hotelStars" class="fa fa-star starRating-' + this['rate'] + '"></span>';
var priceHistoryModal = '<div>' +
'<p>Price History</p>' +
//Question #1
//Need to show all 7 months
'<p>Month:' + this.price_history[0]['month'] + '</p>' +
//Need to show all 7 month prices
'<p>Price:' + this.price_history[0]['value'] + '</p>' +
'<p>Click to close</p>' +
'</div>';
// Hotel Results Template
var html = '<article id="hotelInfo" class="hotelInfoWrapper" data-rating="' + this['rate'] + '" data-price="' + this['price'] + '" style="position: relative;">' +
'<div class="modalCtn" style="width: 450px; height: 300px; background: #79BD1A; position: absolute; display: none; margin-left: 20%;">' +
//Question #2
//Here I need do another loop and get the price history: month and value of each hotel result (data.hotels) from the loop above.
//And append the priceHistoryModal as template
priceHistoryModal + //its correct?
'</div>' +
'<div class="imgCtn"><img src="' + this['image'] + '" alt=""></div>' +
'<div class="hotelInfo">' +
span +
'<h1>' + this['name'] + '</h1>' +
'<p>' + this['description'] + '</p>' +
'<button class="bookNow">Book now</button>' +
'<button id="showPriceHistory" class="priceHistory">Price history</button>' +
'</div>' +
'<div class="hotelPrice">' +
'<small>Total</small>' +
'<h2 class="price">$' + this['price'] + '</h2>' +
'</div>' +
'</article>';
//Question #3
//This button calls the modal with price history container
//But just the first button works and call all modals at the same time
//On click need to call only the modal inside the same button container
$("#showPriceHistory").on('click', function() {
$(".modalCtn").fadeIn();
});
//Just for close modal
$(".modalCtn").on('click', function() {
$(this).fadeOut();
});
//Append the html template variable to the hotel list
$(html).hide().appendTo("#hotelList").fadeIn(400);
}); //End Loop
}); //End Ajax
}); //End Button Search Hotels Event<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hotelList"></div>
谢谢！
答案 0 :(得分：0)
我在json数据中使用每个来存储历史记录，你有任何其他问题。
$(".searchHotels").on('click', function() {
//Get JSON Data
$.getJSON('http://www.raphaelfabeni.com.br/rv/hotels.json', function(data) {
//Start loop
$.each(data.hotels, function(k, v) {
//Stars rating template
var span = '<span id="hotelStars" class="fa fa-star starRating-' + this['rate'] + '"></span>';
var priceHistoryModal = '<div>' +
'<p class="title_p">Price History</p>';
//Question #1
//Need to show all 7 months
$(this.price_history).each(function(){
//console.log(this.month)
priceHistoryModal += '<p>Month:' + this.month + '</p>' +
//Need to show all 7 month prices
'<p>Price:' + this.value + '</p>';
});
priceHistoryModal += '<p class="close_p">Click to close</p>' +
'</div>';
// Hotel Results Template
var html = '<article id="hotelInfo" class="hotelInfoWrapper" data-rating="' + this['rate'] + '" data-price="' + this['price'] + '" style="position: relative;">' +
'<div id="modal_' + k + '" class="modalCtn" style="width: 450px; height: auto; background: #79BD1A; position: absolute; display: none; margin-left: 20%;">' +
//Question #2
//Here I need do another loop and get the price history: month and value of each hotel result (data.hotels) from the loop above.
//And append the priceHistoryModal as template
priceHistoryModal + //its correct?
'</div>' +
'<div class="imgCtn"><img src="' + this['image'] + '" alt=""></div>' +
'<div class="hotelInfo">' +
span +
'<h1>' + this['name'] + '</h1>' +
'<p>' + this['description'] + '</p>' +
'<button class="bookNow">Book now</button>' +
'<button value="' + k + '" id="showPriceHistory" class="priceHistory">Price history</button>' +
'</div>' +
'<div class="hotelPrice">' +
'<small>Total</small>' +
'<h2 class="price">$' + this['price'] + '</h2>' +
'</div>' +
'</article>';
//Question #3
//This button calls the modal with price history container
//But just the first button works and call all modals at the same time
//On click need to call only the modal inside the same button container
$("body").on('click', '.priceHistory', function() {
$("#modal_" + $(this).prop('value')).fadeIn();
});
//Just for close modal
$("body").on('click', '.modalCtn', function() {
$(this).fadeOut();
});
//Append the html template variable to the hotel list
$(html).hide().appendTo("#hotelList").fadeIn(400);
}); //End Loop
}); //End Ajax
}); //End Button Search Hotels Eventdiv p{
clear:left;
height:auto;
text-align:left;
margin:4px;
display:table;
}
.title_p{
color:white;
padding-bottom:20px;
font-size:20px;
}
.close_p{
color:red;
font-size:20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="searchHotels" value="search"/>
<div id="hotelList"></div>