Question

我创建了按钮以在下面显示内容。当此内容可见时，我需要在此按钮内更改文本。所以：

我的HTML代码

<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>

和我的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"
    }
  })
});

如何使其正确？

Answer 1

由于您的代码主要使用jQuery，因此这完全是jQuery工作中的文本更改功能：

jsFiddle演示：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");
       }

    });
});

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

1 个答案: