jQuery按钮切换文本在onlick上不起作用

Question

I've created button to show content below. I need change text inside this button when this content is visible. So:

My HTML code

<button class="c-cta c-cta--show-hide">
  <div class="e-cta-text">Pokaż więcej</div>
  <span class="e-cta__icon--regular e-cta__icon--after">
    <i class="fas fa-chevron-circle-down"></i>
  </span>
</button>

and my jQuery

$(function() {
  var button = $("button.c-cta--show-hide");
  var buttonText = $(".e-cta-text");
  button.click(function() {
    $(this).next(".l-center--hidden-content").toggleClass("l-center--show-content");
    $(this).children("span.e-cta__icon--before").children("i").toggleClass("e-cta__icon--before--rotate");
    $(this).children("span.e-cta__icon--after").children("i").toggleClass("e-cta__icon--after--rotate");
  });
// function to change the text
  button.click(function() {
    if (buttonText.innerHTML === "Pokaż mniej") {
      buttonText.innerHTML = "Pokaż więcej"
    } else {
      buttonText.innerHTML = "Pokaż mniej"
    }
  })
});

How to makes it right?

Answer 1

Since your code mostly uses jQuery here's your text-change function completely in jQuery working:

jsFiddle demo: https://jsfiddle.net/wfj6L38v/

$(function() {
    var button = $("button");
    var buttonText = $(".e-cta-text");

    button.click(function() {

       if (buttonText.text() == 'Less') {
           buttonText.html("More");
       } else {
           buttonText.html("Less");
       }

    });
});