jquery to pure JS

Question

Есть код на jquery (Смотрите ниже) который работает как нужно.

Но очень хочется посмотреть как это будет выглядеть на чистом JS. Если кто сможет помочь сделать это буду очень благодарен.

Потратив не малое количество часов пришел к такому такому варианту и не могу продвинуться дальше.

var pickGame = document.querySelectorAll(".icon");
var opWindow = document.querySelector(".container");
console.log(pickGame);
pickGame.forEach(function(aitem, aindex) {
  aitem.addEventListener("click", function(event) {
    var thisitem = this;
    console.log(this.matches(".opened"));
    thisitem.classList.toggle("opened");
    opWindow.classList.toggle("opened");

    if (this.matches(".opened")) {
      opWindow.classList.remove("opened");
    }
    pickGame.forEach(function(bitem, bindex) {
      if (thisitem !== bitem) {
        bitem.classList.remove("opened");
        opWindow.classList.remove("opened");
        setTimeout(() => {
          opWindow.classList.add("opened");
        }, 300);
      }
    });
  });
});

body {
  background: black;
  margin: 0;
  padding: 0;
}

.icon-container {
  background: lightgray;
  padding: 10px;
  width: auto;
  display: inline-flex;
  flex-direction: column;
}

.icon {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: gray;
  margin: 10px;
  cursor: pointer;
  transition: 0.3s ease;
}

.container {
  width: 300px;
  height: 300px;
  background: white;
  position: absolute;
  transform: translateX(-210px);
  transition: 0.3s ease;
  top: 0;
  z-index: -1;
}

.content {
  opacity: 0;
  transition: 0.3s ease;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.visible {
  opacity: 1;
}

.icon.opened {
  border-radius: 10px !important;
}

.container.opened {
  transform: translateX(90px);
}

<div class="icon-container">
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="icon"></div>
</div>

<div class="container">
  <div class="content">
    <h1>1st</h1>
  </div>
  <div class="content">
    <h1>2nd</h1>
  </div>
  <div class="content">
    <h1>3rd</h1>
  </div>
  <div class="content">
    <h1>4th</h1>
  </div>
</div>

Рабочий вариант с JQUERY

$('.icon').click(function() {
  if ($('.icon').not(this).hasClass("opened")) {
    $('.icon').not(this).removeClass("opened");
    $(this).toggleClass("opened");
    $('.container').toggleClass("opened");
    setTimeout(() => {
      $('.container').toggleClass("opened");
    }, 300);
  } else {
    $(this).toggleClass("opened");
    $('.container').toggleClass("opened");
  };
})

var iconInd = $('.icon');
var contentInd = $('.content');

iconInd.each(function(indexIcon) {
  iconInd.eq(indexIcon).click(function() {
    setTimeout(() => {
      contentInd.eq(indexIcon).toggleClass("visible");
    }, 300);
    contentInd.each(function(indexContent) {
      if (indexContent !== indexIcon) {
        contentInd.eq(indexContent).removeClass("visible");
      }
    })
  });
});

body {
  background: black;
  margin: 0;
  padding: 0;
}

.icon-container {
  background: lightgray;
  padding: 10px;
  width: auto;
  display: inline-flex;
  flex-direction: column;
}

.icon {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: gray;
  margin: 10px;
  cursor: pointer;
  transition: 0.3s ease;
}

.container {
  width: 300px;
  height: 300px;
  background: white;
  position: absolute;
  transform: translateX(-210px);
  transition: 0.3s ease;
  top: 0;
  z-index: -1;
}

.content {
  opacity: 0;
  transition: 0.3s ease;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.visible {
  opacity: 1;
}

.icon.opened {
  border-radius: 10px!important;
}

.container.opened {
  transform: translateX(90px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="icon-container">
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="icon"></div>
</div>
<div class="container">
  <div class="content">
    <h1>1st</h1>
  </div>
  <div class="content">
    <h1>2nd</h1>
  </div>
  <div class="content">
    <h1>3rd</h1>
  </div>
  <div class="content">
    <h1>4th</h1>
  </div>
</div>

Answer 1

let pickGame = document.querySelectorAll('.icon');
let opWindow = document.querySelector('.container');
let content = document.querySelectorAll('.content');

content.forEach(function(aitem, aindex, arr) {
  pickGame[aindex].addEventListener("click", function() {
    if (!content[aindex].classList.contains('visible')) {
      content.forEach((aitem, aindex) => {
        aitem.classList.remove('visible');
        pickGame[aindex].classList.remove('opened');

      });
      aitem.classList.add('visible');
      pickGame[aindex].classList.add('opened');
      opWindow.classList.remove("opened");
      setTimeout(() => {
        opWindow.classList.add("opened");
      }, 300);
    } else {
      aitem.classList.remove('visible');
      pickGame[aindex].classList.remove('opened');
      opWindow.classList.remove("opened");
    }

  });
});

body {
  background: black;
  margin: 0;
  padding: 0;
}

.icon-container {
  background: lightgray;
  padding: 10px;
  width: auto;
  display: inline-flex;
  flex-direction: column;
}

.icon {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: gray;
  margin: 10px;
  cursor: pointer;
  transition: 0.3s ease;
}

.container {
  width: 300px;
  height: 300px;
  background: white;
  position: absolute;
  transform: translateX(-210px);
  transition: 0.3s ease;
  top: 0;
  z-index: -1;
}

.content {
  opacity: 0;
  transition: 0.3s ease;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.visible {
  opacity: 1;
  transition: 0.3s ease .6s;
}

.icon.opened {
  border-radius: 10px !important;
}

.container.opened {
  transform: translateX(90px);
}

<div class="icon-container">
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="icon"></div>
</div>

<div class="container">
  <div class="content">
    <h1>1st</h1>
  </div>
  <div class="content">
    <h1>2nd</h1>
  </div>
  <div class="content">
    <h1>3rd</h1>
  </div>
  <div class="content">
    <h1>4th</h1>
  </div>
</div>

БЛОГ НА HUSL

jquery to pure JS

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