js увод мыши с любого из одинаковых классов

Question

Казалось бы простой калькулятор, на jQuery написал бы пару строк и готово, но на js не выходит, а нужно именно на js.

Следующий код получает число и наименование валюты из каждого div`a.

После их надо сложить и получить сумму.

Все работает, кроме одного, нужно чтобы это срабатывало для любого из классов noUi-handle-lower.

Но работает только при наведении на первый класс.

var dotted = document.querySelector('.noUi-handle-lower');

dotted.addEventListener('mouseout', function(e) {
    
    let level_1 = document.querySelector('.num1').textContent;
    let level_2 = document.querySelector('.num2').textContent;
    let level_3 = document.querySelector('.num3').textContent;
    let level_4 = document.querySelector('.num4').textContent;

    level_1 = parseInt(level_1);
    level_2 = parseInt(level_2);
    level_3 = parseInt(level_3);
    level_4 = parseInt(level_4);

    let itog = level_1 + level_2 + level_3 + level_4;

    let sum = document.querySelector('.sum');
    sum.innerHTML = itog+' уе.';

}, false);

Как сделать чтобы работало при увода мыши с любого из классов noUi-handle-lower?

html вкратце следующий

noUi-handle-lower - это класс для элемента ползунков, ползунки без инпутов, все пишется в div`ы

  <div class="noUi-handle-lower"></div>
  <div class="noUi-handle-lower"></div>
  <div class="noUi-handle-lower"></div>
  <div class="noUi-handle-lower"></div>

    <div class="num1">157 уе.</div>
    <div class="num2">5 уе.</div>
    <div class="num3">2 уе.</div>
    <div class="num4">632 уе.</div>
    <div class="sum"></div>

Мой код срабатывает только на первом ползунке.

Видимо нужно обратится через родителя, как сделал UModeL

Answer 1

Так как HTML-разметку Вы не приложили (а у меня есть подозрение, что количество блоков .noUi-handle-lower может меняться), то - JS и делегирование:

document.querySelector('.noUi-handle-lower-wrap').addEventListener('mouseout', function(ev) {
  let target = ev.target;
  if (!target.classList.contains('noUi-handle-lower')) return

  target.querySelector('.sum').innerHTML = [...target.querySelectorAll('[class^="num"]')].reduce((acc, el) => {
    return acc += parseInt(el.textContent)
  }, 0) + ' уе.';
});

.noUi-handle-lower { background-color: #fa08; }
.noUi-handle-lower > div { pointer-events: none; }

<div class="noUi-handle-lower-wrap">
  <div class="noUi-handle-lower">
    <div class="num1">15 долларов</div>
    <div class="num2">7 фунтов</div>
    <div class="num3">23 йены</div>
    <div class="num4">63 рубля</div><hr>
    <div class="sum"></div>
  </div><hr>
  <div class="noUi-handle-lower">
    <div class="num1">11 долларов</div>
    <div class="num2">77 фунтов</div>
    <div class="num3">233 йены</div>
    <div class="num4">3 рубля</div><hr>
    <div class="sum"></div>
  </div><hr>
  <div class="noUi-handle-lower">
    <div class="num1">157 долларов</div>
    <div class="num2">5 фунтов</div>
    <div class="num3">2 йены</div>
    <div class="num4">632 рубля</div><hr>
    <div class="sum"></div>
  </div>
</div>

После дополнения в вопросе, делаем ещё одну попытку в "Угадайке":

document.querySelector('.noUi-handle-lower-wrap').addEventListener('mouseout', fCalc);

function fCalc(ev) {
  if (!ev.target.classList.contains('noUi-handle-lower')) return

  this.querySelector('.sum').innerHTML = [...this.querySelectorAll('[class^="num"]')].reduce((acc, el) => {
    return acc += parseInt(el.textContent)
  }, 0) + ' уе.';
}

/* Код ниже, только для интерактивности данного примера и проекте он не нужен! */
document.querySelector('.noUi-handle-lower-wrap').addEventListener('input', function(ev) { let target = ev.target; if (!target.classList.contains('noUi-handle-lower')) return; target.nextElementSibling.textContent=target.value; });

[class^="num"] { display: inline-block; }
[class^="num"]::after { content: ' уе.'; }

<div class="noUi-handle-lower-wrap">
  <input type="range" class="noUi-handle-lower"><div class="num1">50</div><br>
  <input type="range" class="noUi-handle-lower"><div class="num2">50</div><br>
  <input type="range" class="noUi-handle-lower"><div class="num3">50</div><br>
  <input type="range" class="noUi-handle-lower"><div class="num4">50</div><hr>
  <div class="sum"></div>
</div>

БЛОГ НА HUSL

js увод мыши с любого из одинаковых классов

Ответы (1 шт):