Форум

laimas · #**461** (**permalink**) 22.02.2018, 20:09

Сообщение от spinastr

У меня нету даже базового знания js

Его и не будет, если не заниматься этим.

Эта тема может быть занесена в книгу рекордов Гиннеса как самая толстая тема на форму программистов. И большая заслуга в этом принадлежит вам, причиной которой является банальная невнимательность, которую ни к JS ни к любому иному языку не пришить.

По меньше бы писали лишнего и больше бы вникали что вам пишут, ибо вы одно просите, затем иное, вам под иное пишут код, а вопрошающий уже и сам запутался что где и чего надо.

Сообщение от spinastr

Почему нельзя сразу всё подсказать, можно казать 97% сделано, конечно не мной мне помогли, видите как мне тяжело даются оставшиеся 3 %?

Вы перечитайте свои "пустые вопросы" - "а че не работает", "почему пусто".... и т.п., без представления картины того что именно... Тут не гадалки, по картинкам не ворожат и по "трем словам" могут в ответ и "послать...".

И большая масса постов этой темы именно в этом ключе - "что-то мычат, не понятно о чем", и при этом ждут конкретного ответа. Чего же вы ожидаете в таком случае?

И не думайте, что это я написал сжатыми в кулак руками, это действительно такая тема, пустая на 99%.

************

Начитайте изучать предмет, ибо тут не кафедра Javascript, а форум помощи тем кто сам что-то делает. Иначе как со стеной диалог получается.

laimas · #**462** (**permalink**) 22.02.2018, 20:15

Сообщение от Nexus

тс не справился со столь "сложным" выводом информации...

Это и без кода вашего понимать можно. Зачем такое, тут уже настолько все просто, казалось бы видно, а значит понятно. Нет блин, надо еще более запугать терминами непонятными.

Что охота продолжение темы до 1000 постов?

Nexus · #**463** (**permalink**) 22.02.2018, 20:23

laimas, мне (не)показалось, что у автора возникают какие-то сложности с присвоением классов для вывода информации, подумал, может быть ему будет проще присваивать data-атрибуты )

Сообщение от laimas

Что охота продолжение темы до 1000 постов?

Сервер Сбера возвращает курс для множества валют.
Если автор захочет вывести еще какие-нибудь, то не исключено, что комментариев в теме будет за тысячу.

Для вывода курсов для двух валют понадобилось уже около 500 комментариев

laimas · #**464** (**permalink**) 22.02.2018, 20:24

Сообщение от Nexus

мне (не)показалось, что у автора возникают какие-то сложности с присвоением классов для вывода информации

То есть то, что вы написали это намного проще для него?

Nexus · #**465** (**permalink**) 22.02.2018, 20:27

Сообщение от laimas

То есть то, что вы написали это намного проще для него?

Я ж уже написал, что это был fail с моей стороны)

spinastr · #**466** (**permalink**) 22.02.2018, 20:41

Сообщение от Nexus

справился со столь "сложным" выводом информации...

Куда уж мне соваться?

Смеётесь на домной?

Смейтесь...

Я уже точно ничего не понимаю,

Если есть желание подсказать то подскажите, если нет. То верну скрипт как был, просто с выводом одного курса доллара.

Лично я лучше учусь на живом примере который готов и работает, а подставлять всё по очереди то JS это сложнее CSS И HTML,

Прошу вас подскажите что делать?

spinastr · #**467** (**permalink**) 22.02.2018, 20:47

Код

<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
        <script type="text/javascript" src="http://forum.ucoz.ru/.s/src/jquery-1.7.2.js"></script>
    </head>
    <body>

<style>
.up {color: #0f0;}
.down {color: #f00;}
</style> 
 
<table>
    <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: 2em;" class="previous USD title"></p>

<p style="font-size: 1.5em;" class="current EUR"></p>

<p style="font-size: 2em;" class="current USD title"></p>
 
<script>

$.getJSON("http://h116641.s08.test-hf.su/", function(data) {

    $.each(data, function(k, o) {
        $.each(o, function(a, r) {
            $('.'+k+'.'+a).html(
                a=='date' ? r : {'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 : ''
            })
        })
    });
</script>
    </body>
</html>

spinastr · #**468** (**permalink**) 22.02.2018, 20:52

Так не выводится в блок, дата

$('.previous date').html(data.current.date);

так не выводится дата

$('.previous date').html(current.date);

Как выводится дата?

laimas · #**469** (**permalink**) 22.02.2018, 20:56

Сообщение от 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>

laimas · #**470** (**permalink**) 22.02.2018, 20:58

Сообщение от spinastr

$('.previous date').html(data.current.date);

так не выводится дата

$('.previous date').html(current.date);

Выкинуть эту хрень сам скрипт разместит в них данные.

Форум

Справочник

Discord чат

Курсы javascript