why is button toggle not working with class?-CodePudding

When I change my button toggle from ID-Name to Class-Name, the function is not working anymore. Does anyone know why?

I need a class since this button is multiple times on the page and loads in separately via css and sliders. The function and content is still the same.

$(document).ready(function(){
 $('.infoBtn').on('click', function () {
  var text=$('.infoBtn').text();
  if(text === "info"){
    $(this).html('close');
  } else{
    $(this).text('info');
 }
});
});

CodePudding user response：

The issue is your use of selector inside the click event:

$('.infoBtn').text();

Pointy: Your code should use $(this), not $('.infoBtn') inside the handler. What you have now will get the text only from the first one on the page.

If you change that to $(this), it should work as required:

$(this).text();

$(document).ready(function(){
  $('.infoBtn').on('click', function(){
    //REM: Use $(this) and not $('.infoBtn')!
    let text = $(this).text();
    $(this).text((text === 'info') ? 'close' : 'info')
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class = 'infoBtn'>initial</button>
<button class = 'infoBtn'>initial</button>