fix: 原地替换文本节点,保持 HTML 结构不变
This commit is contained in:
parent
5e4b811ff4
commit
ace23ceadc
@ -1,26 +1,26 @@
|
|||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
document.querySelectorAll('blockquote[data-cn]').forEach(function (el) {
|
document.querySelectorAll('blockquote[data-cn]').forEach(function (el) {
|
||||||
const orig = el.getAttribute('data-orig');
|
const cn = el.getAttribute('data-cn').split('|');
|
||||||
const cn = el.getAttribute('data-cn');
|
// 收集所有文本节点
|
||||||
|
const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
|
||||||
|
const nodes = [];
|
||||||
|
while (walker.nextNode()) nodes.push(walker.currentNode);
|
||||||
|
// 存原文
|
||||||
|
const orig = nodes.map(n => n.textContent);
|
||||||
let showing = 'orig';
|
let showing = 'orig';
|
||||||
|
|
||||||
function swap(to) {
|
function swap(to) {
|
||||||
const text = to === 'cn' ? cn : orig;
|
if (to === 'cn') {
|
||||||
// 清空并重建文本内容,保留换行
|
cn.forEach((text, i) => { if (nodes[i]) nodes[i].textContent = text; });
|
||||||
el.innerHTML = text.split(' ').join('\n')
|
} else {
|
||||||
.split('\n').map((line, i, arr) => {
|
orig.forEach((text, i) => { if (nodes[i]) nodes[i].textContent = text; });
|
||||||
if (i === arr.length - 1 && line === '') return '';
|
}
|
||||||
return line;
|
|
||||||
}).join('<br>');
|
|
||||||
showing = to;
|
showing = to;
|
||||||
}
|
}
|
||||||
|
|
||||||
el.style.cursor = 'pointer';
|
el.style.cursor = 'pointer';
|
||||||
el.addEventListener('mouseenter', () => swap('cn'));
|
el.addEventListener('mouseenter', () => swap('cn'));
|
||||||
el.addEventListener('mouseleave', () => swap('orig'));
|
el.addEventListener('mouseleave', () => swap('orig'));
|
||||||
el.addEventListener('click', (e) => {
|
el.addEventListener('click', () => swap(showing === 'orig' ? 'cn' : 'orig'));
|
||||||
e.preventDefault();
|
|
||||||
swap(showing === 'orig' ? 'cn' : 'orig');
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -13,50 +13,44 @@ echo "of the human, by the human, for the human" | sed 's/human/AI/g'
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<blockquote data-orig="Umwertung aller Werte. — Nietzsche" data-cn="重估一切价值。 — 尼采">
|
<blockquote data-cn="重估一切价值。|— 尼采">
|
||||||
Umwertung aller Werte.
|
<p>Umwertung aller Werte.</p>
|
||||||
|
<p>— Nietzsche</p>
|
||||||
— Nietzsche
|
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<blockquote data-orig="Die Proletarier haben nichts in ihr zu verlieren als ihre Ketten. Sie haben eine Welt zu gewinnen. — Marx" data-cn="无产者在这个革命中失去的只是锁链,他们获得的将是整个世界。 — 马克思">
|
<blockquote data-cn="无产者在这个革命中失去的只是锁链,他们获得的将是整个世界。|— 马克思">
|
||||||
Die Proletarier haben nichts in ihr zu verlieren als ihre Ketten. Sie haben eine Welt zu gewinnen.
|
<p>Die Proletarier haben nichts in ihr zu verlieren als ihre Ketten. Sie haben eine Welt zu gewinnen.</p>
|
||||||
|
<p>— Marx</p>
|
||||||
— Marx
|
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<blockquote>
|
<blockquote>
|
||||||
枪杆子里面出政权。
|
<p>枪杆子里面出政权。</p>
|
||||||
|
<p>— 毛泽东</p>
|
||||||
— 毛泽东
|
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<blockquote data-orig="I have a dream, today. — Martin Luther King Jr." data-cn="我有一个梦想,就是今天。 — 马丁·路德·金">
|
<blockquote data-cn="我有一个梦想,就是今天。|— 马丁·路德·金">
|
||||||
I have a dream, today.
|
<p>I have a dream, today.</p>
|
||||||
|
<p>— Martin Luther King Jr.</p>
|
||||||
— Martin Luther King Jr.
|
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<blockquote data-orig="of the people, by the people, for the people. — Lincoln" data-cn="民有、民治、民享。 — 林肯">
|
<blockquote data-cn="民有、民治、民享。|— 林肯">
|
||||||
of the people, by the people, for the people.
|
<p>of the people, by the people, for the people.</p>
|
||||||
|
<p>— Lincoln</p>
|
||||||
— Lincoln
|
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<blockquote data-orig="Hasta la victoria siempre. — Che Guevara" data-cn="直到永远的胜利。 — 切·格瓦拉">
|
<blockquote data-cn="直到永远的胜利。|— 切·格瓦拉">
|
||||||
Hasta la victoria siempre.
|
<p>Hasta la victoria siempre.</p>
|
||||||
|
<p>— Che Guevara</p>
|
||||||
— Che Guevara
|
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user