У меня есть функция, добавляющая класс 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')
    }
  });
}
0
hendy0817 24 Окт 2019 в 17:55

2 ответа

Лучший ответ
$('.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');

И он должен работать.

1
Marcelo The Wizzard Coder 24 Окт 2019 в 15:24

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

$('.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>
-1
Ahmed Tag Amer 24 Окт 2019 в 15:04
58544005