Итак, вот код, который я написал, мое назначение таково:
У меня есть файл JSON отсюда: http://ergast.com/api/f1/+SEASON+/drivers.json
Есть два СЕЗОНА: 2016 и 2017, поэтому мне нужно два файла json соответственно.
Я должен сделать три списка.
Первый должен содержать файл json сезона 2016 года, так что http://ergast.com/api/f1/2016/drivers.json
и должен содержать только имя и фамилию
Второй должен содержать файл json сезона 2017 года, поэтому
http://ergast.com/api/f1/2017/drivers.json
а также должен содержать имя и фамилию
И в третьем списке должны быть мои любимые драйверы, поэтому он должен быть сортируемым пользовательским интерфейсом, чтобы я мог перетаскивать туда или обратно, и когда есть люди в третьем списке, и под этим я подразумеваю имя и фамилию, и нажав на полное имя там должно быть дополнительной информацией, такой как номер, дата рождения, национальность. Я сделал это с помощью jquery ui tooltip.
Всплывающая подсказка работает, но когда я нажимаю на вторую вкладку, я не могу вернуться к первой
Пожалуйста, помогите!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<title>Formula 1</title>
<script>
function getEntries(u,l) {
$.ajax({
url: u,
dataType: "jsonp",
success: function (data) {
$.each(data.Drivers, function (i,item) {
var name = item.givenName;
var surname = item.familyName;
var num = item.permanentNumber;
var date = item.dateOfBirth;
var nationality = item.nationality;
var strana = item.url;
l.append("<div class='container2'><ol><li>Name: '+name+', Surname: '+surname+'</li></ol>");
});
}
});
}
$(document).ready(function () {
var u1 = "http://ergast.com/api/f1/2016/drivers.json";
var u2 = "http://ergast.com/api/f1/2017/drivers.json";
var l1 = $('#list1');
var l2 = $('#list2');
getEntries(u1,l1);
$("#tabs").tabs({
beforeActivate: function (uevenet,ui) {
if(ui.newTab.index()==0) {
if($("#list1 li").size()==0) {
getEntries(u1,l1);
}
}
else if(ui.newTab.index()==1)
{
if($("#list2 li").size == 0)
{
getEntries(u2,l2);
}
}
}
});
$("#list3").sortable({});
$( "#list1" ).sortable({
connectWith: "#list3"
});
$( "#list2" ).sortable({
connectWith: "#list3"
});
$( "#list1, #list2, #list3" ).disableSelection();
$(document).tooltip({
items: "#list3 li, #list2 li, #list1 li",
content: function(){
var el = $(this);
var br = el.attr("num");
var datum = el.attr("date");
var nacionalnost = el.attr("nationality");
var link = el.attr("strana");
return "Number of driver: " + br +
"Datum na raganje" + datum +
"Nacionalnost" + nacionalnost +
"Url do vozac" + link;
}
});
})
</script>
<style>
.container{
float:left;
margin:20px;
padding: 5px;
}
.container1{
float:right;
padding: 5px;
}
.container2{
width: 500px;
}
.li:nth-child(odd) { background: white;}
.li:nth-child(even) { background: lightblue; }
.container{
border-left: 1px lightgray solid;
}
#list1, #list2, #list3{
list-style-type: none;
}
.row-selected{
background:lightblue;
}
</style>
</head>
<body>
<div id="tabs" style="min-height:5000px">
<ul>
<li><a href="#tabs-1">2016 Drivers</a></li>
<li><a href="#tabs-2">2017 Drivers</a></li>
</ul>
<div id="tabs-1">
<div class="container" style="float:left">
<strong>2016 Drivers</strong>
<ul id="list1"></ul>
</div>
</div>
<div id="tabs-2">
<div class="container" style="float:left">
<strong>2017 Drivers</strong>
<ul id="list2"></ul>
</div>
</div>
<div id="fav" class="container1" style="float:left">
<strong>Favourites</strong>
<ul id="list3">
<li>Drop you favourite drivers here...</li>
</ul>
</div>
</div>
</body>
</html>