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

Помогите, пожалуйста, переписать код с классического JavaScript на JQuery. Совсем недавно начал изучать JQuery и не совсем врубаюсь в его синтаксис, хочу посмотреть на реальном примере собственного кода. Заранее спасибо.

Вот код - https://codepen.io/Voldemar_Kurakin/pen/GRomNqW
  • Вопрос задан
  • 367 просмотров
Пригласить эксперта
Ответы на вопрос 4
@Asokr
1) element.addEventListener('click',  - $(element).on('click',
2) (event.target.classList.contains('button_card_text') - $(event.target).hasClass('button_card_text') //вроде должно быть ок
3) this.querySelector('.front').classList.contains('active') - $(this).find('.front').hasClass('active');
4) event.target.classList.remove('active'); - $().removeClass()

5) for (let i = 0; i < document.querySelectorAll('.card').length; i++) {
      clickAnimation(document.querySelectorAll('.card')[i]);
}
$('.card').each(function(){
   clickAnimation($(this))
})


Может конечно, где-то, что-то упустил, но примерно как-то так...
Ответ написан
function clickAnimation(element) {
  $(element).on('click', function(event) {
    if ($(event.target).hasClass('button_card_text')) {
      if ($(this).find('.front').hasClass('active')) {
        $(this).find('.front').removeClass('active');
        $(this).find('.back').removeClass('active');
        $(event.target).removeClass('active');
      }
      else {
        $(this).find('.front').addClass('active');
        $(this).find('.back').addClass('active');
        $(event.target).addClass('active');
      }
    }
  })
}
for (let i = 0; i < $('.card').length; i++) {
  clickAnimation($('.card')[i]);
}
Ответ написан
Recosh
@Recosh
Программист студент
Вот так:
$('.button_card_text').click(function (element) {
      $cardElement = $(this).closest('.card')
      if ($cardElement.find('.front').hasClass('active')) {
        $cardElement.find('.front').removeClass('active');
        $cardElement.find('.back').removeClass('active');
        $cardElement.removeClass('active');
      } else {
        $cardElement.find('.front').addClass('active');
        $cardElement.find('.back').addClass('active');
        $cardElement.addClass('active');
      }
})


Хотя я бы элементы .front и .back отправил бы в переменные, что бы не заставлять машину искать по DOM повторно. Но для наглядности оставил так.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽