Как при наведении на ссылку выполнить 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, время: 13:17. |