کد HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>سپهران</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="newstyle.css" type="text/css">
</head>
<body>
<div id="body">
</div>
<script>
$(document).ready(function () {
flights =
{
"from": 'تهران مهرآباد',
"to": 'مشهد',
"returnFrom": 'مشهد',
"go": [{
"flightID": "494_1_0_0",
"fullDate": "2018-10-05",
"date": "07-13",
"miliSeconds": 1538715300000,
"airlineName": "\u0633\u067e\u0647\u0631\u0627\u0646",
"airlineIata": "is",
"flightDepartureTime": "08:25",
"flightArrivalTime": "09:45",
"price": 2400000,
"capacity": -1,
"priceClass": "Y",
"flightNo": "4310",
"airplane": "Boieng 737",
"flightType": 2,
"localFlight": 1,
"childPrice": "0",
"infantPrice": "0",
"desc": "",
"timeRange": "time-2",
"stop": "none-stop",
"stops": "",
"icon": "",
"iconText": "",
"capacityNumber": 1,
"filter": "",
"status": 0
}, {
"flightID": "494_5_0_0",
"fullDate": "2018-10-05",
"date": "07-13",
"miliSeconds": 1538715300000,
"airlineName": "\u0633\u067e\u0647\u0631\u0627\u0646",
"airlineIata": "is",
"flightDepartureTime": "08:25",
"flightArrivalTime": "09:45",
"price": 4740000,
"capacity": -1,
"priceClass": "C",
"flightNo": "4310",
"airplane": "Boieng 737",
"flightType": 2,
"localFlight": 1,
"childPrice": "0",
"infantPrice": "0",
"desc": "",
"timeRange": "time-2",
"stop": "none-stop",
"stops": "",
"icon": ["business"],
"iconText": "Business Class",
"capacityNumber": 5,
"filter": "",
"status": 0
}],
"return": []
};
$.each(flights.go, function (i, item) {
myelement(item)
})//each
function myelement(item) {
var LI = '<div id="dv'+item.flightID+'" class="dvbase">' +
'<div id="list" data-id="' + item.flightID + '">' +
' <div class="right">' +
' <ul>' +
' <li>' +
' <div><span>' + flights.from + '</span></div>' +
' <div>' + item.flightDepartureTime + '</div>' +
' </li>' +
' <li>' +
' <div><span>' + flights.to + '</span></div>' +
' <div>' + item.flightArrivalTime + '</div>' +
' </li>' +
' <li></li>' +
' </ul>' +
' </div>' +
' <div class="left">' +
' <ul>' +
' <li class="price"><span>' + item.price + '</span><span> ریال</span></li>' +
' <li ><button class="info">اطلاعات بیشتر</button></li>' +
' <li ><button class="select">انتخاب پرواز</button></li>' +
' </ul>' +
' </div>' +
' </div>';
$('#body').append(LI);
}//my element
$('.info').click(function () {
id=($(this).parent().parent().parent().parent().parent().attr('data-id'));
// $('#dv'+id).hide();
var li2 = document.createElement('div');
li2.className="dv2base";
li2.id="dv2";
var lii = document.createElement('div');
lii.id="list2";
var right = document.createElement('div');
right.id="right";
right.innerHTML=(' <ul>' +
' <li>' +
' <div><span>' + flights.from +'</span></div>'+
' <div>' + flights.flightDepartureTime + '</div>' +
' </li>' +
' <li>' +
' <div><span>' + flights.to + '</span></div>' +
' <div>' + flights.flightArrivalTime + '</div>' +
' </li>' +
' <li></li>' +
' </ul>');
$('#list2').append(right);
var left = document.createElement('div');
left.id="left";
left.innerHTML=('<ul>' +
' <li class="price"><span>سلام</span><span> ریال</span></li>' +
' <li ><button class="close">بستن</button></li> ' +
' </ul>');
$('#list2').append(left);
$('#dv2').append(lii);
$('#body'+id).append(li2);
});//onclick info
$('.close').click(function () {
$('#dv2').remove();
$('#dv').show();
}); // onclick close
});
//ready
</script>
</body>
</html>
append نشدن محتوا به صفحه
پاسخ با نقل قول
