Цель только нажала якорь не братья и сестры

Question

У меня есть функция, добавляющая класс active, а также меняющая текст привязки при добавлении класса.

Моя проблема в том, что у меня несколько якорей одного и того же класса, и когда я нажимаю один из них, все их тексты меняются. Я просто хочу настроить таргетинг только на тот, на который я нажимаю, с классом active.

function bindMoreInfoClickHandler() {
  $('.more-info').on('click', function() {
    var $this = $(this);
    $this.closest('.container-outer').toggleClass('active');

    if ($('.micro-accordion-container--outer').hasClass('active')) {
      $('.toggle-text').text('Less Info')
    } else {
      $('.toggle-text').text('More Info')
    }
  });
}

Answer 1

$('.toggle-text').text('Less Info')

В приведенной выше строке будут выбраны все ваши элементы .toggle-text. Если .toggle-text является дочерним элементом .container-outer, вы можете сделать что-то вроде этого:

$('.container-outer.active').find('.toggle-text').text('Less Info');
$('.container-outer:not(.active)').find('.toggle-text').text('More Info');

, и оно должно работать.

Answer 2

Это то, что вы хотите?

$('.more-info').on('click', function() {
  $(".more-info").removeClass("active").html("More Info");
  $(this).addClass("active").html("Less Info");
});

a{
display:block;
padding:10px;
background:#f5f5f5;
margin:10px;
}
.active{
  color:red;
{

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a class="more-info">More Info</a>
<a class="more-info">More Info</a>
<a class="more-info">More Info</a>
<a class="more-info">More Info</a>