anki 模板cloze 多次挖空 点击一次显示一次 点对应的显示一个（自带的会全部显示出来）

22年我搜了一下这个问题，用的https://www.bilibili.com/video/BV1Ra411x7dz/这位大佬的。

2024年7月16日 现在我前端技术还凑乎了。最近有空，又看了看代码，感觉写的实现逻辑比较繁琐，借助gpt写了种简单的实现方式。

 

 

<div id="nom">
  {{需要挖空的字段}}
</div>

<style>
	.toggle-text {
		color: blue;
		text-decoration: underline;
		/* 设置文本颜色为蓝色 */
	}

</style>
<script type="text/javascript">
	debugger
	let nom = document.getElementById("nom");
	if (nom) {
		let nomHTML = nom.innerHTML
		nomHTML = nomHTML.replace(/<u>|<u style="">/g, '<span class="toggle-text">');
		nomHTML = nomHTML.replace(/<\/u>/g, "<\/span>");
		nom.innerHTML = nomHTML;

		document.querySelectorAll('.toggle-text').forEach(span => {
			// 保存初始文本内容
			span.dataset.originalText = span
			.textContent; // https://stackoverflow.com/questions/46855677/what-is-the-idea-behind-dataset-objects-and-data-attributes
			span.dataset.toggleState = 'original'; // 初始状态标记为 original

			span.addEventListener('click', () => {
				if (span.dataset.toggleState === 'original') {
					span.textContent = '[...]';
					span.dataset.toggleState = 'hidden'; // 标记当前状态为 hidden
				} else {
					span.textContent = span.dataset.originalText;
					span.dataset.toggleState = 'original'; // 恢复到原始状态
				}
			});
			span.click();
		});
	}

</script>

 

 

参考

https://blog.csdn.net/weixin_42000656/article/details/120593640

https://forums.ankiweb.net/t/cloze-one-by-one-uncovering/12584

https://www.bilibili.com/video/BV1XL4y1V7kc/

https://www.bilibili.com/video/BV1Ra411x7dz/

https://www.zhihu.com/question/422192688