24.01.2022, 23:08
|
Интересующийся
|
|
Регистрация: 16.06.2014
Сообщений: 23
|
|
Как при наведении на ссылку выполнить 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 - атрибут) и соответственно выполнился скрипт ? Спасибо.
|
|
24.01.2022, 23:30
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
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,
});
}
});
|
|
25.01.2022, 07:54
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,750
|
|
рони, У всего должны быть какие то разумные пределы. У делегирования тоже. Одно дело через делегирование на document обрабатывать click, но mouseover - это слишком.
Тут уж лучше на каждую ссылку обработчик повесить.
|
|
25.01.2022, 09:26
|
Интересующийся
|
|
Регистрация: 16.06.2014
Сообщений: 23
|
|
Сообщение от рони
|
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,
});
}
});
|
Спасибо за помощь! У меня в итоге вся страница исчезает и остается только виджет, а мне необходимо, чтобы при наведении показывался виджет, а когда курсор отводится от ссылки, убирается.
|
|
25.01.2022, 09:26
|
Интересующийся
|
|
Регистрация: 16.06.2014
Сообщений: 23
|
|
Сообщение от рони
|
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 - это слишком.
Тут уж лучше на каждую ссылку обработчик повесить.
|
Покажите пожалуйста пример
|
|
25.01.2022, 09:26
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
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 в 09:36.
|
|
25.01.2022, 09:40
|
Интересующийся
|
|
Регистрация: 16.06.2014
Сообщений: 23
|
|
Сообщение от рони
|
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, 09:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
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.закройся
});
}
);
});
|
|
25.01.2022, 10:14
|
Интересующийся
|
|
Регистрация: 16.06.2014
Сообщений: 23
|
|
По средствам HTML я не смогу это сделать ? В этом в принципе и заключался вопрос, чтобы виджет показывался как отдельное (popup) окно.
В документации особо ничего нет, по этому вопросу https://www.tradingview.com/widget/symbol-overview/
|
|
25.01.2022, 11:47
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,223
|
|
Сообщение от voraa
|
Тут уж лучше на каждую ссылку обработчик повесить.
|
Это довольно спорное утверждение, про именно "лучше"...
|
|
|
|