Блог

Главная - Вопросы по программированию - При столкновении 2-х divs добавьте класс в один из них с помощью Javascript

При столкновении 2-х divs добавьте класс в один из них с помощью Javascript

#javascript

#javascript

Вопрос:

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

Я использую .getBoundingClientRect() , но по какой-то причине он не работает.

Может ли кто-нибудь увидеть проблему в моем коде или подсказать мне лучшее решение для этого без использования библиотек (чистый Javascrit)?

Вот мой код:

 var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var object_1 = div1.getBoundingClientRect();
var object_2 = div2.getBoundingClientRect();

if (object_1.left < object_2.left   object_2.width  amp;amp; object_1.left   object_1.width  > object_2.left amp;amp; object_1.top < object_2.top   object_2.height amp;amp; object_1.top   object_1.height > object_2.top){
        div1.classList.add("collide");
    }else{
        div1.classList.remove("collide");
    } 
 #div1{
  position: absolute;
  width: 50px;
  height: 50px;
  background: orange;
  animation: div1 2s infinite;
}

#div2{
  position: absolute;
  width: 50px;
  height: 50px;
  background: pink;
  transform: translateY(40vh);
}

.collide{
  background: red !important;
}

@keyframes div1{
  to{
    transform: translateY(40vh);
  }
} 
 <div id="div1"></div>
<div id="div2"></div>

Комментарии:

1. Ваш скрипт запускается только один раз при первой загрузке, а затем не повторяется. Вам нужно будет следить за изменениями. Посмотрите на Intersection_Observer_API

2. @pilchard, это имеет смысл. Я поместил весь свой скрипт внутрь setInterval() метода за 1 секунду, и теперь это работает 🙂