0

Вот мои ссылки в таблице:

<a href="#" data-token="ETHUSDT" data-binance="BINANCE:ETHUSDT"><img src="/graph.png"></a>
<a href="#" data-token="ADAUSDT" data-binance="BINANCE:ADAUSDT"><img src="/graph.png"></a>

Мне нужно при наведении на эти ссылки показывать график (виджет JS) передав туда data-атрибуты. JS виджета выглядит так:

<div class="graph">
    <div class="graph_modal">
        <div class="tradingview-widget-container">
          <div id="СЮДА ПОДСТАВИТЬ ДАТА-АТРИБУТ"></div>
          <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
              <script type="text/javascript">
              new TradingView.widget(
              {
              "width": 980,
              "height": 610,
              "symbol": "СЮДА ПОДСТАВИТЬ ДАТА-АТРИБУТ",
              "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": "СЮДА ПОДСТАВИТЬ ДАТА-АТРИБУТ"
            }
              );
              </script>
        </div>
    </div>
</div>

CSS:

.graph {
    position:relative;
    margin:100px auto;
    height:16px;
    width:16px;
    background-image: url(graph.png);
    cursor: pointer;
}

.graph_modal {
    display:none;
    margin-left:-350px;
    padding:10px;
    margin-top:10px;
    height:200px;
    -moz-box-shadow:0 5px 5px rgba(0,0,0,0.3);
    -webkit-box-shadow:0 5px 5px rgba(0,0,0,0.3);
    box-shadow:0 5px 5px rgba(0,0,0,0.3);
}

.graph:hover .graph_modal {
    display:block;
    position:absolute;
    z-index:9999;
}  

То есть, чтобы мне не копировать в цикле данный код для каждой ссылки, я хочу использовать его как функцию, просто передавая туда параметры. Может я что-то не понимаю. Подскажите как мне правильно это реализовать ? Есть 10 ссылок, при наведении на которые должен показываться график, вызванный с помощью JS виджета.

Если этот код зациклить под каждую ссылку, то сильно нагружается страница и начинаются тормоза.

введите сюда описание изображения

3 ответа 3

3

Было бы хорошо, если бы вы пример своего кода приложили к вопросу, ибо не совсем понятно, как именно вы хотите сделать.

Сделал, как понял вопрос.

Если что не понятно, спрашивайте.

let links = document.querySelectorAll('.link-list>a');
let infoBlock = document.querySelector('.info');

let openModal = (text) => {
  infoBlock.innerHTML = `Открылось модальное окно ${text} <br>`;
}


links.forEach((link) => {
  link.addEventListener('mouseover', (ev) => {
    let el = ev.target;
    openModal(el.textContent);
    infoBlock.innerHTML += `${el.dataset.param} <br> ${el.dataset.param2}`;
  });
});
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.link-list {
  background: #eee;
}

.link-list a {
  display: block;
  padding: 6px;
}

.info {
  background: #8bbdff;
}
<div class="container">
  <div class="link-list">
    <a href="#" class="link" data-param="wow1" data-param2="cool1">Link 1</a>
    <a href="#" class="link" data-param="wow2" data-param2="cool2">Link 2</a>
    <a href="#" class="link" data-param="wow3" data-param2="cool3">Link 3</a>
    <a href="#" class="link" data-param="wow4" data-param2="cool4">Link 4</a>
    <a href="#" class="link" data-param="wow5" data-param2="cool5">Link 5</a>
  </div>
  <div class="info">

  </div>
</div>

3
  • Правильно понимаю, что мой JS код нужно поместить сюда ? infoBlock.innerHTML = `Открылось модальное окно ${text} <br>`; Как ваш JS код будет выглядеть с моим виджетом JS, не работает у меня просто..
    – Sice60
    23 янв 2022 в 7:20
  • @Sice60 Зависит от того, как именно вы выводите данные виджета и как их применяете. Покажите желаемый вариант, будет проще помочь.
    – Pilaton
    23 янв 2022 в 11:00
  • Я отредактировал свой вопрос, как у меня оно должно быть и как я хочу. Заранее спасибо за помощь.
    – Sice60
    24 янв 2022 в 7:03
2

$("a").mouseenter(function(){
  $(".tradingview-widget-container").empty();
  let div = $(".tradingview-widget-container").add("div").attr("id",this.dataset.token);
  new TradingView.widget({
    "width": 980,
    "height": 610,
    "symbol": this.dataset.binance,
    "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": this.dataset.token
  });
})
.graph {
    position:relative;
    margin:100px auto;
    height:16px;
    width:16px;
    background-image: url(graph.png);
    cursor: pointer;
}

.graph_modal {
    display:none;
    margin-left:-350px;
    padding:10px;
    margin-top:10px;
    height:200px;
    -moz-box-shadow:0 5px 5px rgba(0,0,0,0.3);
    -webkit-box-shadow:0 5px 5px rgba(0,0,0,0.3);
    box-shadow:0 5px 5px rgba(0,0,0,0.3);
}

.graph:hover .graph_modal {
    display:block;
    position:absolute;
    z-index:9999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<a href="#" data-token="ETHUSDT" data-binance="BINANCE:ETHUSDT">ETH/USDT</a>
<a href="#" data-token="ADAUSDT" data-binance="BINANCE:ADAUSDT">ADA/USDT</a>
<div class="graph">
    <div class="graph_modal">
        <div class="tradingview-widget-container"></div>
    </div>
</div>

6
  • Почему то здесь виджет не загружается, вот рабочий пример codepen.io/snakems/pen/jOaOENZ
    – SnakeMS
    25 янв 2022 в 8:11
  • Всё супер!, только он мне его открывает не как отдельное окно у курсора, а ломает верстку и ставит блок двигая шапку сайта и после того, как курсор увожу от ссылки, оно не исчезает.
    – Sice60
    25 янв 2022 в 14:56
  • Немного подправил код. Стили там уже под себя настроите сами. codepen.io/snakems/pen/jOaOENZ
    – SnakeMS
    25 янв 2022 в 15:35
  • как можно с вами связаться? telegram или каким-нибудь другим способом ?
    – Sice60
    25 янв 2022 в 16:11
  • В профиле есть ссылка на GitHub, а там есть контакт
    – SnakeMS
    26 янв 2022 в 9:54
2
  1. Добавил в ссылки onmouseenter="init_graph(this.getAttribute('data-binance'))"
  2. Определил функцию init_graph()
  3. Заменил селектор в CSS a:hover ~ .graph .graph_modal.

Получилось как получилось

let init_graph = (symbol) => 
  new TradingView.widget({
    "width": 980,
    "height": 610,
    symbol,
    "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": "graph_container"
  });
.graph {
  position: relative;
  margin: 100px auto;
  height: 16px;
  width: 16px;
  background-image: url(graph.png);
  cursor: pointer;
}

.graph_modal {
  display: none;
  margin-left: -350px;
  padding: 10px;
  margin-top: 10px;
  height: 200px;
  -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}

a:hover ~ .graph .graph_modal {
  display: block;
  position: absolute;
  z-index: 9999;
}
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<a href="#" data-token="ETHUSDT" data-binance="BINANCE:ETHUSDT" onmouseenter="init_graph(this.getAttribute('data-binance'))">
  <img src="https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8dHJhZGV8ZW58MHx8MHx8&auto=format&fit=crop&w=200&q=60">
</a>
<a href="#" data-token="ADAUSDT" data-binance="BINANCE:ADAUSDT" onmouseenter="init_graph(this.getAttribute('data-binance'))">
  <img src="https://images.unsplash.com/photo-1624996379697-f01d168b1a52?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8dHJhZGV8ZW58MHx8MHx8&auto=format&fit=crop&w=200&q=60">
</a>
<div class="graph">
  <div class="graph_modal">
    <div class="tradingview-widget-container">
      <div id="graph_container"></div>
      <script type="text/javascript">
      </script>
    </div>
  </div>
</div>

3
  • Ничего не происходит при наведении на ссылку :(
    – Sice60
    25 янв 2022 в 14:55
  • @Sice60. Прошу прощения, может показаться неочевидным. Надо было открыть на всю страницу. Вот ссылка на codepen где 100% работать должно.
    – DiD
    25 янв 2022 в 18:27
  • спасибо Вам за помощь! Всё работает, но виджет открывается в самом низу страницы, нарушая верстку и всё остальное, я его еле заметил. Как мне сделать, чтобы он открывался справа от курсора или иконки самой ссылки ?
    – Sice60
    26 янв 2022 в 9:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.