利用CSS隐藏HTML元素并插入替代内容

news2024/12/23 14:29:35

在创建一个支持切换阅读模式和答题模式的Anki问答题模板中,我创建了一个支持切换阅读模式和答题模式的问答题模板,该文最终利用JavaScript将Anki输出的向下箭头删除,并插入自定义的提示语。经过进一步测试,发现实现上述功能完全不需要使用JavaScript,仅使用CSS即可以实现。

Anki产生向下箭头的那行代码如下:

format!("{provided}<br><span id=typearrow>&darr;</span><br>{expected}")

从上面的模板字符串可知向下箭头所在span元素的id为typearrow,在这个元素后面跟着一个br元素,后面紧接着输出的内容是用户输入的答案存在的错误,可以通过继续查阅源代码搞清楚这些内容包含在什么HTML元素中,也可以在背面内容模板中插入以下JavaScript让系统提示:

var typearrow = document.getElementById('typearrow');
alert(typearrow.nextSibling.nextSibling.tagName);

运行上述代码可知br元素后面紧跟着的是span元素。不过,在CSS选择器中,可以用“+”定位到紧邻的兄弟结点,也可以用“*”通配符匹配任何HTML节点,因此,如果我们只想在br元素后面紧跟着的元素前面添加提示,实际上无需搞清楚用户输入的答案存在的错误包含在哪个元素中,只需用CSS选择器“#typearrow + br + *”就可以定位到那个元素,再加上伪元素选择器“::before”,就可以插入提示信息了。

利用上面的思路改造可切换答题模式与阅读模式的问答题模板后,从下面的源代码可以看出,正面内容模板和背面内容模板都更为简洁,特别是背面内容模板,其中的JavaScript代码完全删除了,理论上运行效率也更高。

正面内容模板:

<script>
// v0.5.3 - https://github.com/SimonLammer/anki-persistence/blob/7107e73086189c190c4d326ef11ebbcded9a08c6/script.js
if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";if(window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e<sessionStorage.length;e++){var t=sessionStorage.key(e);0==t.indexOf(_persistenceKey)&&(sessionStorage.removeItem(t),e--)}},this.setItem=function(e,t){void 0==t&&(t=e,e=_defaultKey),sessionStorage.setItem(_persistenceKey+e,JSON.stringify(t))},this.getItem=function(e){return void 0==e&&(e=_defaultKey),JSON.parse(sessionStorage.getItem(_persistenceKey+e))},this.removeItem=function(e){void 0==e&&(e=_defaultKey),sessionStorage.removeItem(_persistenceKey+e)})}catch(e){}this.isAvailable=function(){return e}},window.Persistence_windowKey=function(e){var t=window[e],i=!1;"object"==typeof t&&(i=!0,this.clear=function(){t[_persistenceKey]={}},this.setItem=function(e,i){void 0==i&&(i=e,e=_defaultKey),t[_persistenceKey][e]=i},this.getItem=function(e){return void 0==e&&(e=_defaultKey),void 0==t[_persistenceKey][e]?null:t[_persistenceKey][e]},this.removeItem=function(e){void 0==e&&(e=_defaultKey),delete t[_persistenceKey][e]},void 0==t[_persistenceKey]&&this.clear()),this.isAvailable=function(){return i}},window.Persistence=new Persistence_sessionStorage,Persistence.isAvailable()||(window.Persistence=new Persistence_windowKey("py")),!Persistence.isAvailable()){var titleStartIndex=window.location.toString().indexOf("title"),titleContentIndex=window.location.toString().indexOf("main",titleStartIndex);titleStartIndex>0&&titleContentIndex>0&&titleContentIndex-titleStartIndex<10&&(window.Persistence=new Persistence_windowKey("qt"))}}</script>
<script>
	var model = Persistence.getItem();
   if (model == null) {
      model = { model:'answer',};
		Persistence.setItem(model);
   	}else{
		var back = document.getElementById('back');
		var btnToggle = document.getElementById('btnToggle');
		var answer = document.getElementById('answer');
		if (model.model == 'answer'){
			btnToggle.value = '答题模式';
			back.style = 'display:none';
			answer.style = 'display:bolck';
		}else{
			btnToggle.value = '阅读模式';
			back.style = 'display:bolck';
			answer.style = 'display:none';
		}
	}
	
	function toggleModel(){
		var btnToggle = event.currentTarget;
		var back = document.getElementById('back');
		var answer = document.getElementById('answer');
		if (model.model == 'answer'){
			model.model = 'read';
			btnToggle.value = '阅读模式';
			back.style='display:bolck';
			answer.style = 'display:none';
		}
		else{
			model.model = 'answer';
			btnToggle.value = '答题模式';
			back.style='display:none';
			answer.style = 'display:block';
		}
		Persistence.setItem(model);
	}
</script>
<div><a>说明:</a><q>当前模式如下方按钮所示。点击下方按钮可在阅读模式和答题模式之间切换。</q></div>
<div align="center">
<input id='btnToggle' type='button' onclick='toggleModel()' value='答题模式'></input></div>

<hr class="separator" />
<div class="h1 xcolor xleft">
	<span>⛳问题</span>	
		<span id="time">
	</span>
</div>
<div class="h2 xleft" align=left>{{edit:问题}}</div>
<hr class="separator" />

<div class="slide">
	<div class="h1 ycolor yleft">
	<span>👉	口诀</span>
	</div>
	<div class="h3  yleft";align=left>{{edit:口诀}}</div>
</div>
<hr class="separator" />

<div id='answer' class="h1 ycolor xleft" style='display:block'>
	<span class="yimg">✍️	回答</span><br><br>
	{{type:答案}} 	
	<hr class="separator" />
</div>

<div id='back' style='display:none'>
	<div class="h1 ycolor yleft">
		<span>👍正确答案</span>	
	</div>
	<div class='normal'>{{edit:答案}}<div>

	<hr class="separator" />
	<div class="h1 ycolor xleft md-content">
		<span>⚓备注</span>
	</div>
	<div class='normal'>{{edit:备注}}<div>
</div>

背面内容模板:

<div class="h1 xcolor xleft">
	<span>⛳	问题</span>
		<span id="time">
	</span>
</div>
<div class="h2 xleft" align="left">{{edit:问题}}</div>
<hr class="separator" />

<div class="slide">
	<div class="h1 ycolor yleft">
	<span>👉	口诀</span>
	</div>
	<div class="h3  yleft" align="left">{{edit:口诀}}</div>
</div>
<hr class="separator" />
<div class="slide" id="slide1">
	<div class="h1 ycolor yleft">
	<span>👉答案对比</span>
	<div class= "note"><a>说明:</a>没有另外显示正确答案时表示你的答案完全正确。</div>
	</div>
	<div class="h1  yleft" align="left" >{{FrontSide:type:答案}}</div>
</div>
<hr class="separator" />
<div class="h1 ycolor xleft md-content">
	<span>⚓备注</span>
</div>
<div class='normal'>{{edit:备注}}<div>

样式文件只贴出在Anki自带的问答题模板基础上后来添加的内容,其中值得注意的地方均有注释注明:

.color1,q{
	font-weight:bold;
	color:red;
}
.color2,a,a:link,a:visited,a:hover,a:active{
	font-weight:bold;
	color:blue;
	text-decoration:none;
}
.color3,i{
	font-weight:bold;
	color:rgb(230,12,237);
}
.separator{
	border:none;
	border-top-width:0.3em;
	border-top-style:solid;
	border-top-color:#aaa;
	margin:1.2em 0 1.2em 0;
}
.normal{
	text-indent:2em;
	font: 22px/22px 'Aa奶糖油画体','干就完事了简';
	line-height:1.5em;
}
.h3{
	font-family:"Aa奇思胖丫儿";
	color:green;
	background:yellow;
}
b{
	font-size:1.2em;
	-webkit-text-stroke:0.01em #0f0;
}

q::before,q::after{
	content:"";
}
#btnToggle {
    background-color: #4CAF50; /* Green */
    border: none;
    color: yellow;
    padding: 0.3em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.2em;
	 border-radius:0.5em;
	 box-shadow: 0.1em 0.15em teal;
}
/*拼写正确时的文字样式*/
.typeGood{
 	background-color:#0f0; /*transparent:透明*/
}
/*拼写错误时的文字样式*/
/*没有拼写出来的文字样式*/
.typeBad, .typeMissed{
 	background-color:#ff0;
	color:red;
	font-weight:bold;
}

code#typeans {
	font-family: "Aa虎头虎脑";
	font-weight:bold;
}
.note{
	text-indent:2em;
	margin:1em 0em;
}
/*在用户输入的答案前添加提示*/
code#typeans::before {
	content:"你的答案:";
	color:#33c;
}
/*隐藏anki生成的箭头,该箭头包含在一个id为typearrow的span中*/
#typearrow{
	display:none;
}
/*跳过向下箭头元素及其后面的br元素,添加提示。当然我们可以利用
JavaScript查出那个元素的标签名是span*/
#typearrow + br + *::before{
	content:"正确答案:";
	color:#33c;
	-webkit-text-stroke:0em;
}

这篇文章本质上是上一篇文章的延续,但上一篇文章已经补充过多次,为方便阅读,在此另写一文。下面放一张背面截图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1807494.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一步一学!如何通过SOLIDWORKS曲面放样绘制花瓶?

SOLIDWORKS中&#xff0c;我们对放样凸台的操作已经非常熟悉。现在&#xff0c;我们将进一步探索曲面菜单栏中的放样成型功能。 1、绘制草图 首先&#xff0c;同普通放样凸台建模相同&#xff0c;绘制放样轮廓及引导线段。 可通过创建基准面布置轮廓&#xff0c;利用穿透选项将…

定个小目标之刷LeetCode热题(13)

今天来看看这道题&#xff0c;介绍两种解法 第一种动态规划&#xff0c;代码如下 class Solution {public int maxSubArray(int[] nums) {int pre 0, maxAns nums[0];for (int x : nums) {// 计算当前最大前缀和pre Math.max(pre x, x);// 更新最大前缀和maxAns Math.ma…

第一百零二节 Java面向对象设计 - Java静态内部类

Java面向对象设计 - Java静态内部类 静态成员类不是内部类 在另一个类的主体中定义的成员类可以声明为静态。 例子 以下代码声明了顶级类A和静态成员类B&#xff1a; class A {// Static member classpublic static class B {// Body for class B goes here} }注意 静态成…

python实现将excel数据指保存到word表格中

准备一个excel表格 上代码&#xff1a; import openpyxl from docx import Document# 读取Excel文件 excel_file 大学名次.xlsx wb openpyxl.load_workbook(excel_file) ws wb.active# 获取Excel文件中的所有工作表名称 sheet_names wb.sheetnames# 遍历每个工作表&#x…

每日题库:Huawe数通HCIA——15(30道)

注&#xff1a;由于限制原因&#xff0c;今后资料仅提供给粉丝 所有资料均来源自网络&#xff0c;但个人亲测有效&#xff0c;特来分享&#xff0c;希望各位能拿到好成绩&#xff01; PS&#xff1a;别忘了一件三连哈&#xff01; 今日题库&#xff1a; 231. 如下图所示的网…

【机器学习】Qwen2大模型原理、训练及推理部署实战

目录​​​​​​​ 一、引言 二、模型简介 2.1 Qwen2 模型概述 2.2 Qwen2 模型架构 三、训练与推理 3.1 Qwen2 模型训练 3.2 Qwen2 模型推理 四、总结 一、引言 刚刚写完【机器学习】Qwen1.5-14B-Chat大模型训练与推理实战 &#xff0c;阿里Qwen就推出了Qwen2&#x…

《大道平渊》· 拾壹 —— 商业一定是个故事:讲好故事,员工奋发,顾客买单。

《大道平渊》 拾壹 "大家都在喝&#xff0c;你喝不喝&#xff1f;" 商业一定是个故事&#xff0c;人民群众需要故事。 比如可口可乐的各种故事。 可口可乐公司也只是被营销大师们&#xff0c; 作为一种故事载体&#xff0c;发挥他们的本领。 营销大师们开发故事…

解锁ChatGPT:从GPT-2实践入手解密ChatGPT

⭐️我叫忆_恒心&#xff0c;一名喜欢书写博客的研究生&#x1f468;‍&#x1f393;。 如果觉得本文能帮到您&#xff0c;麻烦点个赞&#x1f44d;呗&#xff01; 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧&#xff0c;喜欢的小伙伴给个三连支…

JVM的几种常见垃圾回收算法

引言&#xff1a; Java Virtual Machine&#xff08;JVM&#xff09;作为Java程序运行的核心&#xff0c;其垃圾回收&#xff08;Garbage Collection, GC&#xff09;机制在内存管理中起着至关重要的作用。垃圾回收算法是JVM性能优化的重要方面。本文将详细介绍几种常见的垃圾回…

45.django - 开始建立第一个项目

1.django是什么&#xff1f; Django是一个高级的、免费的、开源的Web应用框架&#xff0c;它由Python编程语言编写而成。Django遵循模型-视图-控制器&#xff08;MVC&#xff09;的设计模式&#xff0c;但通常将其称为模型-视图-模板&#xff08;MVT&#xff09;架构。它的主要…

Llama模型家族之Stanford NLP ReFT源代码探索 (二)Intervention Layers层

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 基于 LlaMA…

CentOS安装Node.js以及JSDOM跳坑记

笔者在一台 CentOS 7.9 的服务器上使用常规的安装命令&#xff1a;sudo yum install node 来安装 Node.js&#xff0c;到最后系统提示&#xff1a; Error: Package: 2:nodejs-20.14.0-1nodesource.x86_64 (nodesource-nodejs) Requires: libstdc.so.6(GLIBCXX_3.4.20)(64bit) …

RabbitMQ-工作模式(Topics模式RPC模式Publisher Confirms模式)

文章目录 Topics模式topic代码示例 RPC模式客户端界面回调队列关联ID总结RPC代码示例 Publisher Confirms模式概述在通道上启用发布者确认单独发布消息批量发布消息异步处理发布者确认总结总体代码示例 更多相关内容可查看 Topics模式 在Topics中&#xff0c;发送的消息不能具…

C#异步编程是怎么回事

首先以一个例子开始 我说明一下这个例子。 这是一个演示异步编程的例子。 输入job [name],在一个同步的Main方法中,以一发即忘的方式调用异步方法StartJob()。输入time,调用同步方法PrintCurrentTime()输出时间。输出都带上线程ID,便于观察。 可以看到,主线程不会阻塞。主…

SmartEDA VS Multisim/Proteus:电子设计江湖,谁主沉浮?

在电子设计的江湖里&#xff0c;SmartEDA、Multisim和Proteus无疑是几大门派&#xff0c;各自拥有独特的武功秘籍和门派特色。今天&#xff0c;我们就来一场巅峰对决&#xff0c;看看这些电子设计软件究竟谁能笑傲江湖&#xff0c;成为电子设计界的霸主&#xff01; 一、门派起…

【虚拟现实】一、AR与VR的基本原理

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 增强现实&#xff08;AR&#xff09;和虚拟现实&#xff08;VR&#xff09;技术已经从科幻小说走入现实&#xf…

atomic特质的局限性

为什么在实际的 Objective-C 开发中, 几乎所有的属性都声明为 nonatomic ? 声明为 atomic 的属性我是真的没见过 在实际的 Objective-C 开发中&#xff0c;大多数属性通常声明为 nonatomic&#xff0c;主要原因包括性能考虑和常见的设计模式。具体原因如下&#xff1a; 性能问…

Leetcode刷题笔记8

162. 寻找峰值 162. 寻找峰值 - 力扣&#xff08;LeetCode&#xff09; 对于所有有效的 i 都有 nums[i] ! nums[i 1] 解法一&#xff1a;暴力解法 从第一个位置一直向后走&#xff0c;然后分情况即可1. 第二个元素就往下降&#xff0c;那么第一个元素就是峰顶 2. 一直遍历…

Linux -- 正则表达式基础

提示&#xff1a;制作不易&#xff0c;可以点个关注和收藏哦。 前言 虽然我们这一节的标题是正则表达式&#xff0c;但实际这一节实验只是介绍grep&#xff0c;sed&#xff0c;awk这三个命令&#xff0c;而正则表达式作为这三个命令的一种使用方式&#xff08;命令输出中可以包…

【C++】函数模板和类模版

目录 前言 模板参数 类型模板参数 非类型模板参数 模板的特化 函数模板的特化 类模板的特化 全特化 偏特化 模板的分离编译 模板总结 前言 函数模板和类模板是C模板编程中的两个核心概念&#xff0c;它们允许程序员编写泛型代码&#xff0c;这些代码可以在多种数据…