Получение javascript для выбора ВСЕХ элементов, а не только первого

#javascript

Вопрос:

Я скопировал скрипт, который делает некоторые интересные вещи с плавающей всплывающей подсказкой (прилипает к курсору и переворачивается в зависимости от того, в каком квадранте окна просмотра он находится, чтобы он всегда был виден и т.д.).

Все работает нормально для первого найденного элемента. Но это не работает ни со вторым элементом, ни с любыми элементами после него.

 // I want to select ALL divs with the class 'z-tooltip' but it only seems to select the first one
var tooltip = this.document.getElementsByClassName("z-tooltip")[0];

window.onmousemove = function(ev) {

  var leftPixelSpace = ev.clientX;
  var rightPixelSpace = this.innerWidth - leftPixelSpace; 
  var topPixelSpace = ev.clientY;
  var bottomPixelSpace = this.innerHeight - topPixelSpace;

  var tooltipPosX = leftPixelSpace > rightPixelSpace ? leftPixelSpace  - tooltip.offsetWidth : leftPixelSpace;
  var tooltipPosY = topPixelSpace > bottomPixelSpace ? topPixelSpace - tooltip.offsetHeight : topPixelSpace;
  
  // I want to apply these styles to ALL divs with the class 'z-tooltip', but again, it only seems to work on the first div...
  tooltip.style.left = tooltipPosX "px";
  tooltip.style.top = tooltipPosY "px";
};

 .z-tooltip {
  width: 150px;
  height: 100px;
  border: 1px solid black;
  background-color : lightblue;
  text-align: center;
  position: absolute
}

 <div class="z-tooltip">floating tooltip</div>

<div class="z-tooltip">floating tooltip</div>

<div class="z-tooltip">floating tooltip</div>

Я немного почитал и увидел, что getElementsByClassName("z-tooltip")[0] возвращает их в виде HTML-коллекции, а это не то, что я хочу.

Вместо этого я должен использовать querySelectorAll('.z-tooltip) , который будет выбирать все элементы с классом z-tooltip . Однако, когда я использую это, ни один из скриптов больше не работает: (

Кроме того, я хочу иметь возможность применять стиль (см. Конец фрагмента) ко ВСЕМ элементам с классом z-tooltip . Я знаю, что для этого мне нужно будет «перебрать» все из них и применить стиль. Вот что я пробовал до сих пор, но это не работает:

 for (var i=tooltip.length; i--;) {

tooltip.style.left = tooltipPosX "px";
tooltip.style.top = tooltipPosY "px";

}

Может кто-нибудь указать, что я здесь делаю не так?

Ответ №1:

 // I want to select ALL divs with the class 'z-tooltip' but it only seems to select the first one
var tooltip = this.document.getElementsByClassName("z-tooltip");

window.onmousemove = function(ev) {

  var leftPixelSpace = ev.clientX;
  var rightPixelSpace = this.innerWidth - leftPixelSpace; 
  var topPixelSpace = ev.clientY;
  var bottomPixelSpace = this.innerHeight - topPixelSpace;
  
  // I want to apply these styles to ALL divs with the class 'z-tooltip', but again, it only seems to work on the first div...
  [...tooltip].forEach(tooltip => {
    let tooltipPosX = leftPixelSpace > rightPixelSpace ? leftPixelSpace  - tooltip.offsetWidth : leftPixelSpace;
    let tooltipPosY = topPixelSpace > bottomPixelSpace ? topPixelSpace - tooltip.offsetHeight : topPixelSpace;

    tooltip.style.left = tooltipPosX "px";
    tooltip.style.top = tooltipPosY "px";
  });
};

 .z-tooltip {
  width: 150px;
  height: 100px;
  border: 1px solid black;
  background-color : lightblue;
  text-align: center;
  position: absolute
}

 <div class="z-tooltip">floating tooltip</div>

<div class="z-tooltip">floating tooltip</div>

<div class="z-tooltip">floating tooltip</div>

[0] Отключил, чтобы получить все всплывающие подсказки
Измените логику на [...tooltip].forEach , чтобы преобразовать результат в массив, который затем может быть зациклен

1. Эй, @taplar, при этом выбираются все всплывающие подсказки, но основная функция больше не работает (переключение всплывающих подсказок в зависимости от того, сколько свободного места есть).

2. @Teebling я пропустил, что tooltip он использовался для вычисления tooltipPosX и Y. Их просто нужно было переместить в цикл.

3. Боже мой! Большое спасибо за вашу помощь, теперь это работает 🙂