Форум

Sice · #1 (**permalink**) 24.01.2022, 23:08

У меня есть 5 ссылок:

<a class='tv' href='#' data-token='link_1'><img src='graph.png'></a> 
<a class='tv' href='#' data-token='link_2'><img src='graph.png'></a> 
<a class='tv' href='#' data-token='link_3'><img src='graph.png'></a> 
<a class='tv' href='#' data-token='link_4'><img src='graph.png'></a> 
<a class='tv' href='#' data-token='link_5'><img src='graph.png'></a>

Мне необходимо, при наведении на них выполнить javascript:

<script type="text/javascript">
              let token = document.querySelector('[data-token]'); 
              token = token.getAttribute('data-token');
              
              new TV.widget(
                  {
                  "width": 980,
                  "height": 610,
                  "symbol": token ,
                  "interval": "5",
                  "timezone": "Europe/Moscow",
                  "theme": "dark",
                  "style": "1",
                  "locale": "ru",
                  "toolbar_bg": "#f1f3f6",
                  "enable_publishing": false,
                  "studies": [
                    "BB@tv-basicstudies"
                  ],
                  "show_popup_button": true,
                  "popup_width": "1000",
                  "popup_height": "650",
                  "container_id": token,
                  }
              );
           </script>

При этом передать параметр data-token в JS скрипт. Понимаю, что делается так:

let token = document.querySelector('[data-token]'); 
token = token.getAttribute('data-token');

Подскажите, как правильно это реализовать с помощью jQuery или ещё как, чтобы при наведении на ссылку, передался параметр (data - атрибут) и соответственно выполнился скрипт ? Спасибо.

рони · #2 (**permalink**) 24.01.2022, 23:30

Sice,

document.addEventListener("mouseover", function({ target }) {
            if (target = target.closest("[data-token]")) {
                const { token } = target.dataset;
                new TV.widget({
                    "width": 980,
                    "height": 610,
                    "symbol": token,
                    "interval": "5",
                    "timezone": "Europe/Moscow",
                    "theme": "dark",
                    "style": "1",
                    "locale": "ru",
                    "toolbar_bg": "#f1f3f6",
                    "enable_publishing": false,
                    "studies": [
                        "BB@tv-basicstudies"
                    ],
                    "show_popup_button": true,
                    "popup_width": "1000",
                    "popup_height": "650",
                    "container_id": token,
                });
            }
        });

voraa · #3 (**permalink**) 25.01.2022, 07:54

рони, У всего должны быть какие то разумные пределы. У делегирования тоже. Одно дело через делегирование на document обрабатывать click, но mouseover - это слишком.
Тут уж лучше на каждую ссылку обработчик повесить.

Sice · #4 (**permalink**) 25.01.2022, 09:26

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

Sice,

document.addEventListener("mouseover", function({ target }) {
            if (target = target.closest("[data-token]")) {
                const { token } = target.dataset;
                new TV.widget({
                    "width": 980,
                    "height": 610,
                    "symbol": token,
                    "interval": "5",
                    "timezone": "Europe/Moscow",
                    "theme": "dark",
                    "style": "1",
                    "locale": "ru",
                    "toolbar_bg": "#f1f3f6",
                    "enable_publishing": false,
                    "studies": [
                        "BB@tv-basicstudies"
                    ],
                    "show_popup_button": true,
                    "popup_width": "1000",
                    "popup_height": "650",
                    "container_id": token,
                });
            }
        });

Спасибо за помощь! У меня в итоге вся страница исчезает и остается только виджет, а мне необходимо, чтобы при наведении показывался виджет, а когда курсор отводится от ссылки, убирается.

Sice · #5 (**permalink**) 25.01.2022, 09:26

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

Sice,

document.addEventListener("mouseover", function({ target }) {
            if (target = target.closest("[data-token]")) {
                const { token } = target.dataset;
                new TV.widget({
                    "width": 980,
                    "height": 610,
                    "symbol": token,
                    "interval": "5",
                    "timezone": "Europe/Moscow",
                    "theme": "dark",
                    "style": "1",
                    "locale": "ru",
                    "toolbar_bg": "#f1f3f6",
                    "enable_publishing": false,
                    "studies": [
                        "BB@tv-basicstudies"
                    ],
                    "show_popup_button": true,
                    "popup_width": "1000",
                    "popup_height": "650",
                    "container_id": token,
                });
            }
        });

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

рони, У всего должны быть какие то разумные пределы. У делегирования тоже. Одно дело через делегирование на document обрабатывать click, но mouseover - это слишком.
Тут уж лучше на каждую ссылку обработчик повесить.

Покажите пожалуйста пример

рони · #6 (**permalink**) 25.01.2022, 09:26

voraa,
ок!

document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll("[data-token]").forEach(
                function(link) {
                    const token  = link.dataset.token;
                    link.addEventListener("mouseenter", function() {
                        new TV.widget({
                            "width": 980,
                            "height": 610,
                            "symbol": token,
                            "interval": "5",
                            "timezone": "Europe/Moscow",
                            "theme": "dark",
                            "style": "1",
                            "locale": "ru",
                            "toolbar_bg": "#f1f3f6",
                            "enable_publishing": false,
                            "studies": [
                                "BB@tv-basicstudies"
                            ],
                            "show_popup_button": true,
                            "popup_width": "1000",
                            "popup_height": "650",
                            "container_id": token,
                        });
                    })
                }
            );
        });

Sice · #7 (**permalink**) 25.01.2022, 09:40

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

voraa,
ок!

document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll("[data-token]").forEach(
                function(link) {
                    const token  = link.dataset.token;
                    link.addEventListener("mouseenter", function() {
                        new TV.widget({
                            "width": 980,
                            "height": 610,
                            "symbol": token,
                            "interval": "5",
                            "timezone": "Europe/Moscow",
                            "theme": "dark",
                            "style": "1",
                            "locale": "ru",
                            "toolbar_bg": "#f1f3f6",
                            "enable_publishing": false,
                            "studies": [
                                "BB@tv-basicstudies"
                            ],
                            "show_popup_button": true,
                            "popup_width": "1000",
                            "popup_height": "650",
                            "container_id": token,
                        });
                    })
                }
            );
        });

У меня в итоге весь контент исчезает и остается только виджет)) как его выводить в окне при наведении и чтобы он исчезал, когда курсор убирают с ссылки?)

рони · #8 (**permalink**) 25.01.2022, 09:49

Sice,
читайте документацию на ваш виджет, будет что-то такое ...

document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll("[data-token]").forEach(
                function(link) {
                    const token  = link.dataset.token;
                    let widget;
                    link.addEventListener("mouseenter", function() {
                      widget = new TV.widget({
                            "width": 980,
                            "height": 610,
                            "symbol": token,
                            "interval": "5",
                            "timezone": "Europe/Moscow",
                            "theme": "dark",
                            "style": "1",
                            "locale": "ru",
                            "toolbar_bg": "#f1f3f6",
                            "enable_publishing": false,
                            "studies": [
                                "BB@tv-basicstudies"
                            ],
                            "show_popup_button": true,
                            "popup_width": "1000",
                            "popup_height": "650",
                            "container_id": token,
                        });
                    });
                    link.addEventListener("mouseleave", function() {
                      if(widget)  widget.закройся
                      });
                }
            );
        });

Sice · #9 (**permalink**) 25.01.2022, 10:14

По средствам HTML я не смогу это сделать ? В этом в принципе и заключался вопрос, чтобы виджет показывался как отдельное (popup) окно.
В документации особо ничего нет, по этому вопросу https://www.tradingview.com/widget/symbol-overview/

ksa · #10 (**permalink**) 25.01.2022, 11:47

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

Тут уж лучше на каждую ссылку обработчик повесить.

Это довольно спорное утверждение, про именно "лучше"...

Форум

Справочник

Discord чат

Курсы javascript