переключить класс на кнопку динамически Jquery

Question

Я хочу иметь возможность переключать класс в jquery однозначно на несколько кнопок. В настоящее время происходит, когда я нажимаю кнопку «viewmore», они оба изменяются одновременно. Я хочу, чтобы они работали независимо при нажатии.

const $contentId = $('.fad-physician-profile-card-feinstein__column-wrapper').attr("id");
const $contentBody = $('.fad-physician-profile-card-feinstein__column-wrapper').find(".body-section__main")
const $contentBodyArrow = $('.fad-physician-profile-card-feinstein__column-wrapper').find(".icon.icon--angle-thin")
const $contentBodyBtn = $(".fad-physician-profile-card-feinstein__column-wrapper .fad-btn__toggle")

if ($contentBody.length >= 0) {
  $contentBodyBtn.on('click', (e) => {
    $contentBodyBtn.toggleClass("btn-active");
    if ($contentBodyBtn.hasClass("btn-active")) {
      $contentBody.addClass("active")
      $contentBodyArrow.addClass("caret-up")
      $contentBodyBtn.text("View less")
    } else {
      $contentBody.removeClass("active")
      $contentBodyArrow.removeClass("caret-up")
      $contentBodyBtn.text("View more")
    }
  })
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fad-physician-profile-card-feinstein">
  <section class="row">
    <div class="col-sm-9">
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-12">
            <div class="fad-physician-profile-card-feinstein__profile-image">
              <div class="profile-image">
                <div class="profile-image__initials" data-initials="MD"></div>
              </div>
              <!-- Do not remove needed for font awesome compilation -->
              <!-- class="fal fa-spinner" -->
            </div>
            <h3 class="fad-physician-profile-card-feinstein__title typog-tertiary">King Solomon, </h3>
            <div class="fad-physician-profile-card-feinstein__year">
              <span>1986</span>
            </div>

            <div class="body-section__main" style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur
              adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
              velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
              aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
              cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
            <button class="fad-btn__toggle" role="button" aria-label="View more" aria-expanded="false" style="
    top: 11px;
    z-index: 999;
">View more</button>
            <i class="icon icon--angle-thin"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-9">
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-12">
            <div class="fad-physician-profile-card-feinstein__profile-image">
              <div class="profile-image">
                <div class="profile-image__initials" data-initials="MD"></div>
              </div>
              <!-- Do not remove needed for font awesome compilation -->
              <!-- class="fal fa-spinner" -->
            </div>
            <h3 class="fad-physician-profile-card-feinstein__title typog-tertiary">King Solomon, </h3>
            <div class="fad-physician-profile-card-feinstein__year">
              <span>1986</span>
            </div>

            <div class="fad-physician-profile-card__award">
              <a href="https://molmed.biomedcentral.com/articles/10.2119/molmed.2016.00189" target="_blank">A Journey in Science: Cell-Cycle Control</a>
            </div>

            <div class="body-section__main">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur
              adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
              velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
              aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
              cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
            <button class="fad-btn__toggle" role="button" aria-label="View more" aria-expanded="false">View more</button>
            <i class="icon icon--angle-thin"></i>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

Answer 1

Используйте это, вам не нужно хранить элемент в переменной. Если мы должны выполнить одну и ту же задачу для нескольких кнопок, имеющих один и тот же класс, мы можем использовать $ (this) . Когда мы щелкаем по любому элементу, то к этому элементу мы можем получить доступ, используя $ (this), после этого используя методы обхода jQuery like (next (), prev (), parent () et *) 1018 * ..) мы можем пройти через Dom. Я надеюсь, что это поможет вам https://www.w3schools.com/jquery/jquery_traversing.asp Ваше решение: https://jsfiddle.net/pfsq8oh6/

 $('.fad-btn__toggle').click(function(){
    if($(this).hasClass("btn-active")){
      $(this).removeClass("btn-active");
      $(this).text("View more");
      $(this).next('.icon.icon--angle-thin').removeClass("caret-up");
    }else{
      $(this).addClass("btn-active");
      $(this).next('.icon.icon--angle-thin').addClass("caret-up")
     $(this).text("View less");
    }
  });