Близость курсора от свойств элемента изменения div

Этот код хорошо работает для первого элемента с класс .trigger-элемента. Проблема в том, что когда я пытаюсь повлиять на другие элементы того же класса, это не работает.

Я попытался добавить метод forEach, но не смог заставить его работать.

Это должно влиять только на один элемент за раз и должно работать для каждого div. https://jsfiddle.net/secondleft/53mk1dst/6/

(function() {
  var mX, mY, distance,
    $element = $('.trigger-element');

  // proximity threshold
  var proximity = 300;

  function calculateDistance(elem, mouseX, mouseY) {
    return Math.floor(
      Math.sqrt(
        Math.pow(mouseX - (elem.offset().left + (elem.width() / 2)), 2) +
        Math.pow(mouseY - (elem.offset().top + (elem.height() / 2)), 2)
      )
    ) - Math.round(elem.width() / 2);
  }

  $(document).mousemove(function(e) {
    mX = e.pageX;
    mY = e.pageY;
    distance = calculateDistance($element, mX, mY);

    if (distance < proximity) {
      $element.addClass("triggered");
    } else {
      $element.removeClass("triggered");
    }
  });

})();

body {
  background: black;
}

.trigger-element {
  height: 40px;
  width: 80px;
  border: 1px solid #16f9f9;
  margin: 20px;
}

.triggered {
  color: #05080a;
  background: #16f9f9;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "trigger-element"></div>
<div class = "trigger-element" style = "position:absolute;right:0;"></div>

Ну, один запах кода заключается в том, что $element будет содержать стек результатов из нескольких элементов. Тем не менее, ваш метод calculateDistance рассматривает его как единый элемент.

— 26.04.2019 17:37

Если у вас есть несколько элементов, и каждый из них должен оцениваться индивидуально, вам придется выполнить какой-то цикл.

— 26.04.2019 17:38

javascript jquery

26.04.2019 17:35

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно добавить цикл здесь:

  $(document).mousemove(function(e) {
    mX = e.pageX;
    mY = e.pageY;

    $element.each(function(i,el) {
      const $el = $(el);
      distance = calculateDistance($el, mX, mY);

      if (distance < proximity) {
        $el.addClass("triggered");
      } else {
       $el.removeClass("triggered");
      }  
    });


  });

Я пытался использовать каждый метод, но безрезультатно. спасибо за вашу помощь Адам, это правильно!

— 27.04.2019 10:57

26.04.2019 17:44