سلام دوستان من به یه مشکلی خوردم ممنون میشم راهنمایی کنید
من می خوام به وسیله کد های جاوا اسکریپت محتویات یه صفحه رو که از آرایه هم خونده میشه نمایش بدم و با فشردن یک دکمه محتوای باکس مورد نظر با یک محتوای دیگه جایگزین میشه و با فشردن دکمه ای که تو صفحه جدید وجود داره باید دوباره به حالت قبل برگردیم
الان در مرحله نمایش داده مشکلی ندارم و چاپ اطلاعات درست انجام میشه اما در مرحله دوم که اپند کردن باکس جدید هست به مشکل خوردم کد ها رو میزارم اگه کسی ازدوستان می تونه راهنمایی کنه ممنون میشم
<!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 کردن چه مشکلی به وجود میاد ؟
سلام جناب علیزاده این رو ببینین تا متوجه منظورم بشید
https://codepen.io/khosravi/pen/xyrNMB
اون دکمه اطلاعات بیشتر باید ویو باکس رو عوض کنه اما همونطور که میبینید این اتفاق به درستی نمی افته ممنون میشم راهنمایی ام کنید
هیچ کاربری تا کنون از این پست تشکر نکرده است
با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)
