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

我在一个名为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>

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

Thanks in advance

有了你的风格和一般的想法，这是添加一小部分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> 
-->

如果我理解正确的话，你想在每个顺序点击上添加和删除一些特定的css类?

在这种情况下，切换类将做这样的事情:

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

css可以是这样的例如

#hint .payload {display: none};
#hint.shown .payload {display: block}

相关内容

最新更新

热门标签：