Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.01.2022, 22:08
Интересующийся
Отправить личное сообщение для Sice Посмотреть профиль Найти все сообщения от Sice
 
Регистрация: 16.06.2014
Сообщений: 21

Как при наведении на ссылку выполнить JS?
У меня есть 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, 22:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,038

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,
                });
            }
        });
Ответить с цитированием
  #3 (permalink)  
Старый 25.01.2022, 06:54
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,709

рони, У всего должны быть какие то разумные пределы. У делегирования тоже. Одно дело через делегирование на document обрабатывать click, но mouseover - это слишком.
Тут уж лучше на каждую ссылку обработчик повесить.
Ответить с цитированием
  #4 (permalink)  
Старый 25.01.2022, 08:26
Интересующийся
Отправить личное сообщение для Sice Посмотреть профиль Найти все сообщения от Sice
 
Регистрация: 16.06.2014
Сообщений: 21

Сообщение от рони Посмотреть сообщение
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,
                });
            }
        });
Спасибо за помощь! У меня в итоге вся страница исчезает и остается только виджет, а мне необходимо, чтобы при наведении показывался виджет, а когда курсор отводится от ссылки, убирается.
Ответить с цитированием
  #5 (permalink)  
Старый 25.01.2022, 08:26
Интересующийся
Отправить личное сообщение для Sice Посмотреть профиль Найти все сообщения от Sice
 
Регистрация: 16.06.2014
Сообщений: 21

Сообщение от рони Посмотреть сообщение
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, 08:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,038

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,
                        });
                    })
                }
            );
        });

Последний раз редактировалось рони, 25.01.2022 в 08:36.
Ответить с цитированием
  #7 (permalink)  
Старый 25.01.2022, 08:40
Интересующийся
Отправить личное сообщение для Sice Посмотреть профиль Найти все сообщения от Sice
 
Регистрация: 16.06.2014
Сообщений: 21

Сообщение от рони Посмотреть сообщение
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, 08:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,038

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.закройся
                      });
                }
            );
        });
Ответить с цитированием
  #9 (permalink)  
Старый 25.01.2022, 09:14
Интересующийся
Отправить личное сообщение для Sice Посмотреть профиль Найти все сообщения от Sice
 
Регистрация: 16.06.2014
Сообщений: 21

По средствам HTML я не смогу это сделать ? В этом в принципе и заключался вопрос, чтобы виджет показывался как отдельное (popup) окно.
В документации особо ничего нет, по этому вопросу https://www.tradingview.com/widget/symbol-overview/
Ответить с цитированием
  #10 (permalink)  
Старый 25.01.2022, 10:47
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,835

Сообщение от voraa
Тут уж лучше на каждую ссылку обработчик повесить.
Это довольно спорное утверждение, про именно "лучше"...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как при наведении на родительский элемент "вкл" стили :hover::before для дочернего? Gera Herbst Events/DOM/Window 4 30.08.2015 14:41
Как запустить такую функцию при нажатии на ссылку? varde Общие вопросы Javascript 0 18.07.2015 23:13
Смена body{background-url} при наведении на ссылку amator0 Элементы интерфейса 2 18.03.2014 19:53
При наведении на ссылку меняется картинка ucoz (jquery) pelimeshki jQuery 2 12.01.2012 23:53
Подскажите как при помощи JS hta в трею свернуть kimboo Общие вопросы Javascript 4 11.07.2008 15:00