jQuery click() function inside each()

Question

Can anyone please help me with this bit of code.I do not understand what is wrong and why it's not performing. Thanks.

var i = 0;
$('.course-testimonial-wrapper .testimonial-content-text').each(function() {
  // console.log(i);

  $(this).attr('id', 'testimonial-' + i);
  $(this).append('<div class="description-overlay" id="d-over-' + i + '"></div>');
  $(this).after('<div><button class="btn green show-more-' + i + ' shadow-0 p-0 medium" style="font-size: 14px;">Mostra di più <i class="fi-rr-angle-small-down"></i></button></div>');

  $('.show-more-' + i + '').click(function() {
    $('#testimonial-' + i + '').toggleClass('expand');
    $('#d-over-' + i + '').toggleClass('d-none');

    if ($('#testimonial-' + i + '').hasClass('expand')) {
      $('.show-more-' + i + '').html('Mostra di meno <i class="fi-rr-angle-small-up"></i>');
    } else {
      $('.show-more-' + i + '').html('Mostra di più <i class="fi-rr-angle-small-down"></i>');
    }
  })
  i++;
})

What do you mean by it is "not performing"? See how to create a minimal, concrete and verifiable example. — Terry
– Terry, Commented Feb 11, 2021 at 10:44
The click() function inside the each() function is not working. — ross80
– ross80, Commented Feb 11, 2021 at 10:47
Do more logging, like $('.show-more-' + i + '').length or such — Christophe Roussy
– Christophe Roussy, Commented Feb 11, 2021 at 10:48
Do some basic debugging. Does the callback passed to .each() actually run? If so, does the selector you're trying to bind the click event to ($('.show-more-' + i + '')) actually find an element? Etc. — Mitya
– Mitya, Commented Feb 11, 2021 at 10:49

Carsten Løvbo Andersen · Accepted Answer · 2021-02-11 10:52:42Z

1

You don't need to use i to make it more dynamic. You could do it like this.

$('.show-more').click(function() {
  var testimonial = $(this).parent().prev();
  testimonial.toggleClass('expand');
  testimonial.find('.description-overlay').toggleClass('d-none');

  if (testimonial.hasClass('expand')) {
    $(this).html('Mostra di meno <i class="fi-rr-angle-small-up"></i>');
  } else {
    $(this).html('Mostra di più <i class="fi-rr-angle-small-down"></i>');
  }
})

Demo

$('.testimonial-content-text').each(function(i, x) {
  // console.log(i);
  $(this).attr('id', 'testimonial-' + i);
  $(this).append('<div class="description-overlay" id="d-over-' + i + '"></div>');
  $(this).after('<div><button class="btn green show-more shadow-0 p-0 medium" style="font-size: 14px;">Mostra di più <i class="fi-rr-angle-small-down"></i></button></div>');


})

$('.show-more').click(function() {
  var testimonial = $(this).parent().prev();
  testimonial.toggleClass('expand');
  testimonial.find('.description-overlay').toggleClass('d-none');

  if (testimonial.hasClass('expand')) {
    $(this).html('Mostra di meno <i class="fi-rr-angle-small-up"></i>');
  } else {
    $(this).html('Mostra di più <i class="fi-rr-angle-small-down"></i>');
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testimonial-content-text">test1</div>
<div class="testimonial-content-text">test2</div>

answered Feb 11, 2021 at 10:52

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ross80 Over a year ago

Thank you so much...you made my day :-)

Carsten Løvbo Andersen Over a year ago

@ross80 No problem, happy to help

Mark Baijens Over a year ago

@ross80 If this answers you question correctly please accept the answer (check mark to the left) so we can see you don't need help anymore.

Rory McCrossan · Accepted Answer · 2021-02-11 10:55:32Z

The issue is to do with the scope of the i variable. When your loop completes i will be the final value it was set to in the iteration. You can fix this with a closure.

However a far better approach is to get rid of the unnecessary incremental id and class attributes, and use common class names instead. Then you can traverse the DOM to find the related elements and update them as required, all within a single delegated event handler which is created once outside the loop. Try this:

$('.course-testimonial-wrapper .testimonial-content-text').each(function() {
  $(this).append('<div class="description-overlay">Description overlay...</div>');
  $(this).after('<div><button class="btn green show-more shadow-0 p-0 medium">Mostra di più <i class="fi-rr-angle-small-down"></i></button></div>');
});

$('.course-testimonial-wrapper').on('click', '.show-more', function() {
  let $btn = $(this);
  let $content = $btn.closest('.course-testimonial-wrapper').find('.testimonial-content-text').toggleClass('expand');
  $content.find('.description-overlay').toggleClass('d-none');

  if ($content.hasClass('expand')) {
    $btn.html('Mostra di meno <i class="fi-rr-angle-small-up"></i>');
  } else {
    $btn.html('Mostra di più <i class="fi-rr-angle-small-down"></i>');
  }
});

.show-more {
  font-size: 14px;
}

.d-none {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="course-testimonial-wrapper">
  <div class="testimonial-content-text"></div>
</div>

Collectives™ on Stack Overflow

jQuery click() function inside each()

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related