anki 模板cloze 多次挖空 點選一次顯示一次 點對應的顯示一個（自帶的會全部顯示出來）

hrdom發表於2024-07-16

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/

相關文章