|
Сообщение от spinastr
|
|
Я уже точно ничего не понимаю
|
Никто не смеется. Сделайте то, что ранее дали, оно готовое. Просто в своих реальных элементах укажите соответствующие имена классов.
Классы как селекторы выбраны потому, что позволяют вывести курсы в несколько областей страницы. ID как уникальное значение этого не позволит сделать, хотя если заменить классы на ID и так их писать
current-USD
....
то можно вывести оба курса за две даты с датами. А если применить селектор [id|=current] то и больше, но вся прелесть ID уже не в счет.
Селектор по имени класса плох тем, что будут опрошены все элементы на странице, пусть хоть тысячи, все. Но можно ограничить поиск, если поместить нужные элементы с классами в блоки с уникальными ID и указать поиск только в них.
Вот тот же самый пример, в нем для примера таблице дан id и два параграфа помешены в блок с id, только в которых и будет производится поиск нужных элементов.
И результат:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html" />
<title>Курс</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<style>
.up {color: #0f0;}
.down {color: #f00;}
</style>
<table id="box_1">
<tr>
<td><span class="previous date"></span></td>
<td><span class="current date"></span></td>
</tr>
<tr>
<td><span class="previous USD title"></span></td>
<td><span class="current USD title"></span></td>
</tr>
<tr>
<td><span class="previous EUR"></span></td>
<td><span class="current EUR"></span></td>
</tr>
</table>
<p style="font-size: 1em;" class="previous USD title">А сюда уже не будет вывода курса, этот элемент имеет нужные имена классов, но находится вне элментов box_1 и box_2</p>
<div id="box_2">
<p style="font-size: 1.5em;" class="current EUR"></p>
<p style="font-size: 2em;" class="current USD title"></p>
</div>
<script>
//это имитация ответа сервера
var data = {
"current": {
"date": "23.2.2018",
"USD": {
"value": 56.7608,
"rate": 2
},
"EUR": {
"value": 69.6341,
"rate": 1
}
},
"previous": {
"date": "22.2.2018",
"USD": {
"value": 56.6537,
"rate": 2
},
"EUR": {
"value": 69.8087,
"rate": 1
}
}
};
//закомментируем две строки кода для работы примера
//$.getJSON("http://h116641.s08.test-hf.su", function(data) {
$.each(data, function(k, o) {
console.log(k, o) //это для посмотреть в консоли что это значит, затем удалить
$.each(o, function(a, r) {
console.log(a, r) //это для посмотреть в консоли что это значит, затем удалить
//теперь ограничим поиск элементов по классу на странице только в пределах двух блоков с id равными box_1 и box_2
$('#box_1, #box_2').find('.'+k+'.'+a) //найдем в указанных id элементы по составному классу
.html( //и поместим в них html код
a=='date' //ключ объекта равен date?
? r //да, ключ объекта равен date, значит помещаем в элементы с классами class="previous date" и class="current date" соответствующую дату,
//в какой именно какую определяет значение ключа "k" - current/previous
: //нет, значение ключа не равно date, а равно USD или EUR
{'USD':'$','EUR':'€'}[a] //получаем символ валюты
+ ' ' + r.value.toFixed(2) + //добавляем к нему курс
' <b class=' + ['','down','up'][r.rate] +'>' + ['','▼','▲'][r.rate] +'</b>' //добавляем стрелку и ее стиль
).attr('title', function() {
return $(this).hasClass('title') ? data[k].date : '' //если у элемента есть имя класса title, то пишем ему в атрибут title дату курса
})
})
})
//});
</script>
</body>
</html>