Saya memiliki fungsi menambahkan kelas active dan juga mengubah teks jangkar ketika kelas ditambahkan.

Masalah saya adalah bahwa saya memiliki beberapa jangkar dari kelas yang sama dan ketika saya mengklik satu semua teks mereka berubah. Saya hanya ingin menargetkan hanya yang saya klik yang memiliki kelas 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 Oktober 2019, 17:55

2 jawaban

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

Baris di atas akan memilih semua elemen .toggle-text Anda. Jika .toggle-text adalah elemen turunan dari .container-outer, Anda dapat melakukan sesuatu seperti ini:

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

Dan itu harus bekerja.

1
Marcelo The Mage Coder 24 Oktober 2019, 15:24

Apa ini yang kau inginkan ?

$('.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 Oktober 2019, 15:04