将文本更改为隐藏和显示的按钮

Question

我在名为 Anki 的应用程序中使用了这段代码，这是一个抽认卡应用程序，可以帮助我记住新单词。我有这段代码，当我点击它时会写一个文本，显示我在添加新卡时添加的提示字段的内容，

{{#Hint}}
    <div id="hint" class="hidden">
        <p class="trigger">[ click to show hint ]</p>
        <p class="payload">{{Hint}}</p>
    </div>
    <script>
        var hint = document.getElementById('hint');
        hint.addEventListener('click', function() { this.setAttribute('class', 'shown'); });
    </script>
{{/Hint}}

我想要的只是将上面那个文本的功能写到按钮上，例如这样的代码。

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {background-color: #4CAF50;} /* Green */
</style>
</head>
<body>

<button class="button button1">Green</button>

</body>
</html>

而且我希望当我第一次按下按钮时，它会显示提示字段的内容，当我第二次按下它时，它会隐藏它，依此类推...

提前致谢

Answer 1

如果我没理解错的话，您想在每次连续点击时添加和删除某些 css class 吗？

在这种情况下，切换 class 将执行此操作：

hint.addEventListener('click', function() {  hint.classList.toggle("shown"); });

而 css 可以是例如：

#hint .payload {display: none};

#hint.shown .payload {display: block}

Answer 2

鉴于你贡献的风格和总体思路，就是在你的脚本中加入一小部分js。

关于@munleashed 所说的内容，它也可以用于 onclick 事件。

var hint = document.getElementById('hint');

function hide() {
  hint.classList.toggle('shown');
}

.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button1 {
  background-color: #4CAF50;
}
#hint .payload {
  display: none;
}
#hint.shown .payload {
  display: block;
}

<div id="hint" class="hidden">
  <button class="button button1" onclick="hide()">[ TOUCH ]</button>
  <p class="payload">SOME HINT HERE</p>
</div>
<!-- 
<button class="button button1" onclick="hide()">[ TOUCH ]</button>

<div id="hint" class="hidden">
    <p class="payload">SOME HINT HERE</p>
</div> 
-->

将文本更改为隐藏和显示的按钮

Change Text To Button With hidden and shown

html

javascript

css

anki