Как при наведении на ссылку выполнить 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 - атрибут) и соответственно выполнился скрипт ? Спасибо. |
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, }); } }); |
рони, У всего должны быть какие то разумные пределы. У делегирования тоже. Одно дело через делегирование на document обрабатывать click, но mouseover - это слишком.
Тут уж лучше на каждую ссылку обработчик повесить. |
Цитата:
|
Цитата:
Цитата:
|
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,
читайте документацию на ваш виджет, будет что-то такое ... 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.закройся }); } ); }); |
По средствам HTML я не смогу это сделать ? В этом в принципе и заключался вопрос, чтобы виджет показывался как отдельное (popup) окно.
В документации особо ничего нет, по этому вопросу https://www.tradingview.com/widget/symbol-overview/ |
Цитата:
|
Часовой пояс GMT +3, время: 12:18. |