Как данный код на JQuery переписать на чистый JavaScript?

Question

[Vladislav]

Как данный код на JQuery переписать на чистый JavaScript?

$('.reviews__commentaries.value-commentaries').click(function() {
      $(this).parent('.reviews__btn-comment').next().next('.reviews__response-comment').slideToggle()
      $(this).parent('.reviews__btn-comment').next('.reviews__response-comment').slideToggle()
      $(this).next('svg').toggleClass('rotate-comment')
    });

Answer 1

[Absolute138]

document.querySelector('.reviews__commentaries.value-commentaries').addEventListener('click', function(){
    this.parentNode.nextElementSibling.classList.toggle('slide-tooggle');
    this.parentNode.nextElementSibling.nextElementSibling.classList.toggle('slide-tooggle');
    this.nextElementSibling.classList.toggle('rotate-comment');
});

slideToggle() додумывайте через css))

.reviews__response-comment{
  -webkit-transition: height .3s ease;
  height: 0;
  overflow: hidden;
}
.reviews__response-comment.slide-tooggle {
  height:100px;
}

Comments

[Vladislav]

А не подскажите, что цикл while в данном случае делает и разве нужен цикл, ведь логика строится на клике, обращение к родителю, обращение к соседним, общение к дочерним узлам дома и добавления класса

[Absolute138]

Vladislav, Вы правы. while здесь действительно не нужен. Я писал - у меня чуть иная логика работы метода next() в jQuery была в голове, чем она есть на самом деле)

[Vladislav]

Absolute138, то есть вы перепишите скрипт свой? Я не проверял вместо своего просто ещё и не знаю сработает или нет

[Absolute138]

Vladislav, отредактировал ответ.

[Vladislav]

Absolute138, хорошо, как будет возможность, посмотрю, если все будет работать, отмечу решением, а в данном случае this у вас это то, на что повешано событие клика?

[Absolute138]

Vladislav, верно. С css всё равно придется повозиться скорее всего. Я набросал как пример.
Можете посмотреть:
https://jsbin.com/yaxefuboro/edit?html,js,console,...

[Vladislav]

Absolute138, спасибо, все работает, только в css чутка поправить мне, а так все как и на JQuery

[Vladislav]

Absolute138, а знаете как реализовать fadeIn() / fadeOut(), но нативно?

[Absolute138]

Vladislav, без css??
Вот здесь посмотрите, там есть эти две функции: https://stackoverflow.com/questions/13733912/javas...

[Vladislav]

Absolute138, css + js

[Absolute138]

Vladislav, в сети полно примеров. Вам просто нужно переключать классы на js.
https://fvsch.com/articles/transition-fade/test5.html
Как сделать fadeIn/fadeOut с помощью css3?