Как получить и изменить свойства нажатого элемента в списке одинаковых элементов?

Question

[William Miller]

Есть вот такое меню
при нажатии на один конкретный элемент должен раскрываться один элемент
как на примере

вот код

<div class="service">
                        <div class="service__static">
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/service/second.png" alt="" class="service__logo_img">
                            <div class="service__text_block" >
                                <h3 class="service__text_block_title">Title is here</h3>
                            </div>
                            <button class="service__button">
                                <img src="<?php echo get_template_directory_uri(); ?>/assets/img/service/arrow.png" alt="" class="service__button_img" >
                            </button>
                        </div>
                        <div class="service__dinamic">
                            <div class="flex__item"></div>
                            <div class="service__hidden_block" >
                                <p class="service__hidden_block_text">Block descripttion is hereBlock descripttion is hereBlock descripttion is hereBlock descripttion is hereBlock descripttion is here</p> 
                            </div>
                            <div class="flex__item_second"></div>
                        </div>
                        
                    </div>

написал такую функцию , через this хотел получить элемент на который был клик при нажатии меняются все элементы а не только элемент на который был нажат

$('.service__text_block', this).on('click', function(){
      let btn = $('.service__button')
      let cont = $('.service__hidden_block')
      let borderTop = $('.service__text_block')
      if(btn.hasClass('service__button_img_rotate')){
        btn.removeClass('service__button_img_rotate');
        borderTop.removeClass('service__text_block_border')
      }
      else{
        btn.addClass('service__button_img_rotate');
        borderTop.addClass('service__text_block_border')
      }
      cont.slideToggle('1000')
  });

Подскажите где искать или какие методы применить ?
Правильно ли будет если присвоить каждому элементу свой id и написать функцию которая получает id и меняет только те элменты у которых совпадает id ? Но в таком случае если клиент решит в будущем добавить еще один элемент он не сможет ведь самостоятельно их добавить , прошу знатаков в js подсказать какие методы использовать

Answer 1

[Arsenii]

Здесь не совсем понятно, зачем this в селекторе клика, если, применив вот так:

$('.service__text_block').on('click', function(){
      let btn = $('.service__button')
      let cont = $('.service__hidden_block')
      let borderTop = $('.service__text_block')
      if(btn.hasClass('service__button_img_rotate')){
        btn.removeClass('service__button_img_rotate');
        borderTop.removeClass('service__text_block_border')
      }
      else{
        btn.addClass('service__button_img_rotate');
        borderTop.addClass('service__text_block_border')
      }
      cont.slideToggle('1000')
  });

Ты по $(this) внутри и так будешь общаться к элементу, на который был клик

Comments

[Arsenii]

А далее ты можешь обращаться скажем к родителям через .closest() и т.д.

[William Miller]

Arsenii,

$('.service').on('click', function(){
  let btn = $('.service__button_img')
  let cont = $('.service__hidden_block')
  let borderTop = $('.service__text_block')
  console.log(this.id)
  if($(this, btn).hasClass('service__button_img_rotate')){
    $(this, btn).removeClass('service__button_img_rotate');
    $(this, borderTop).removeClass('service__text_block_border')
  }
  else{
    $(this, btn).addClass('service__button_img_rotate', this);
    $(this, borderTop).addClass('service__text_block_border', this)
  }
  $(this, cont).slideToggle('1000')
});

если так все нужные стили плчему то присваиваются к главному элменту то есть метод skideToggle стоит он должен был применится к переменной cont но применяется к .service

[Arsenii]

William Miller, Да, так как ты обращаешься к ним по прямым селекторам, поиск которых происходит по всему DOM.
К примеру:
У тебя должно быть нечто такое:

$('.service').on('click', function(){
  let btn = $(this).find('.service__button_img'); // Ищешь внутри блок .service__button_img
  let cont = $(this).find('.service__hidden_block'); // Ищешь внутри блок .service__hidden_block
  let borderTop =  $(this).find('.service__text_block') // Ищешь внутри блок .service__text_block

Таким образом ты получаешь только элементы, которые внутри блока, где произошел клик, не затрагивая другие.

А после ты используешь эти переменные для применения стилей, также не используя глобальные селекторы, а работая внутри блока через его же самого ($(this))
А методы: find() ищет по селектору внутри родителя и closest() ищет ближайших родителей дочернего элемента по селектору.

[Arsenii]

Ну а далее, собственно, вот этот код заработает для нужных элементов:

if(btn.hasClass('service__button_img_rotate')){
        btn.removeClass('service__button_img_rotate');
        borderTop.removeClass('service__text_block_border')
      }
      else{
        btn.addClass('service__button_img_rotate');
        borderTop.addClass('service__text_block_border')
      }
$(this).slideToggle('1000')

[William Miller]

Arsenii, я понял схема такая через this мы получаем элемент на который был произведен клик следовательно когда обявляем перемменные

$('.service').on('click', function(){
let btn = $(this).find('.service__button_img');
  let cont = $(this).find('.service__hidden_block');
  let borderTop =  $(this).find('.service__text_block')

мы ищем внутри именно того $('.service') на который кликнули то есть метод find() находит элементы внутри определенного блока , спасибо вам большое Arsenii научился новому методу

[Arsenii]

William Miller, Да, именно так. То есть вы ищите с привязкой к элементу по которому произошел клик.
И тогда действия далее происходят в рамках элемента.
А методы find и closest позволяют осуществлять навигацию отталкиваясь от элемента $(this).
В целом можно все действия делать и без переменных, это уже вопрос оптимизации, если же у вас там 1-2 действия. А если их много - лучше переменные, чтобы не дублировать код.