Question

我有一个关于用户单击按钮后更改按钮文本的简单问题。

我希望单击按钮可以使文本在两个值之间切换：“更多”和“更少”。请注意，在第一次单击之前，它必须具有值“更多”，在单击之后必须具有值“ Less”：

<button class="btn btn-primary" type="button" 
data-toggle="collapse" data-target="#collapseExample" 
aria-expanded="false" aria-controls="collapseExample">
More
</button>

<div class="collapse" id="collapseExample">
   <p>Test</p>
</div>

在此先感谢您的帮助。

祝你有美好的一天

Answer 1

这可以通过以下方式使用香草javascript实现：

return (padFormat<width>(first) + ... + padFormat<width>(rest));

/*
Fetch the buttom element
*/
const button = document.body.querySelector('[data-target="#collapseExample"]');

/*
Add click event listener where we will provide logic that updates the button text
*/
button.addEventListener('click', function() {
  
  /*
  Update the text of the button to toggle beween "More" and "Less" when clicked
  */
  if(button.innerText.toLowerCase() === 'less') {
    button.innerText = 'More';
  }
  else {
    button.innerText = 'Less';
  }
});

Answer 2

基本上，您可以向按钮添加onclick事件，以引用function，如下所示：

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" onclick="changeText()">
More
</button>

然后，您准备使用JavaScript function来更改文本：

function changeText () {
   if (this.innerText == "More") { // check if text inside is "More"
      this.innerText == "Less";    // If so, change to "Less"
   } else {
      this.innerText == "More";
   }
}

Javascript：单击后更改按钮文本更改

2 个答案: