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

Question

[Владимир Куракин]

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

Вот код - https://codepen.io/Voldemar_Kurakin/pen/GRomNqW

Comments

[d-sem]

Зачем в 2020 году изучать jQuery?
Для общего развития или сайтов на ie6?

[Andrew]

d-sem, Многие проекты работают на jQ. Дадите денег на рефактор?
И да, на собеседовании, иногда, просят jQ. даже если ты говоришь что знаешь ES6+

[d-sem]

Andrew, На собеседованиях спрашивают иногда и знание perl. Там тоже есть проекты, у которых нет денег на рефактор, но есть на программистов.

[Andrew]

d-sem, человеку которому нужна работа, особенно, в начале пути, это будет не самый плохой вариант. Не всем сразу везёт попасть на хорошего ментора и проект с "новыми" стандартами. Лучше искать по полгода "НИБУДУ В ЖАКВЕРИ" или поработать это время?
Если у вас есть возможность - пожалуйста, а сразу ставить под сомнение необходимость новичку знать jQ - сомнительно, т.к. если рынок требует - учи.

Answer 1

[Коал Коалыч]

https://stackoverflow.com/questions/52870011/how-t...

Answer 2

[Павел]

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))
})

Может конечно, где-то, что-то упустил, но примерно как-то так...

Answer 3

[Максим]

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]);
}

Answer 4

[Кирилл Петров]

Вот так:

$('.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 повторно. Но для наглядности оставил так.

Comments

[Кирилл Петров]

А если переписать код с нуля, то сделал бы так:

$('.button_card_text').click(function (element) {
  $cardElement = $(this).closest('.card')
  $cardElement.find('.front').toggleClass('active');
  $cardElement.find('.back').toggleClass('active');
  $cardElement.toggleClass('active');
})