我很抱歉提前發布了近 170 行 JS 代碼，但減少它根本不會復制問題。問題必須在此 JS 代碼中的某個地方。
我通過陣列/物件生成內容。這絕對沒問題。但是，即使它們應該是 DOM 樹的一部分，我也不能forEach用來操作它們的內容。spans
我在這里想念什么？
var language = document.documentElement.lang.toLowerCase();
/* ----- locailization_database.js ----- */
var DB_localization = [
/* content */
[
[
'DB_localization/content/text-block-2a',
document.querySelector('#text-block-2'),
'text',
{
de: `In Deutschland gibt es noch keine Gesetze, die artgerechte Haltung
vorschreiben. Dennoch gibt es Richtlinien, nach welchen auch einige
Veterin?r?mter handeln.`,
us: 'not localized',
en: 'not localized'
}
],
[
'DB_localization/content/text-block-2b',
document.querySelector('#text-block-2'),
'tag',
{
de: '',
us: '',
en: ''
},
'br',
''
],
[
'DB_localization/content/text-block-2c',
document.querySelector('#text-block-2'),
'text',
{
de: `Die Tier?rztliche Vereinigung für Tierschutz e.V. (TVT), das
Bundesministerium für Ern?hrung und Landwirtschaft (BMEL) sowie der
Sachkundenachweis für Kleins?uger nach §11 Tierschutzgesetz, empfehlen ein
Gehegema? für alle Hamsterarten ab `
/*<span ></span>
<span ></span>. */
,
us: 'not localized',
en: 'not localized'
}
],
[
'DB_localization/content/text-block-2d',
document.querySelector('#text-block-2'),
'tag',
{
de: '',
us: '',
en: ''
},
'span',
'minimum-surface-area'
],
[
'DB_localization/content/text-block-2e',
document.querySelector('#text-block-2'),
'tag',
{
de: '',
us: '',
en: ''
},
'span',
'unit-lenght'
]
],
/* measurement units */
[
[
'DB_localization/units/lenght',
document.querySelectorAll('.unit-lenght'),
{
de: 'cm',
us: 'in',
en: 'cm'
}
],
[
'DB_localization/units/surface-area-A',
document.querySelectorAll('.unit-surface-area-A'),
{
de: 'm2',
us: 'not localized',
en: 'm2'
}
],
[
'DB_localization/units/surface-area-B',
document.querySelectorAll('.unit-surface-area-B'),
{
de: 'cm2',
us: 'ft2',
en: 'cm2'
}
],
[
'DB_localization/units/factor',
document.querySelectorAll('.unit-factor'),
{
de: 'x',
us: 'x',
en: 'x'
}
],
[
'DB_localization/units/minimum-surface-area',
document.querySelectorAll('.minimum-surface-area'),
{
de: '100x50',
us: '32x18',
en: '100x50'
}
],
]
];
/* ----- localization.js ----- */
window.addEventListener('load', function() {
/* loading unique elements */
for (let i = 0; i < DB_localization[0].length; i ) {
let DB_array_element = DB_localization[0][i][1],
DB_array_type = DB_localization[0][i][2],
DB_array_value = DB_localization[0][i][3][language];
if (typeof DB_array_element !== 'undefined' &&
typeof DB_array_type !== 'undefined' &&
typeof DB_array_value !== 'undefined') {
if (DB_array_type == 'text') {
DB_array_element.insertAdjacentHTML('beforeend', DB_array_value);
}
if (DB_array_type == 'tag') {
let DB_array_tag = DB_localization[0][i][4],
DB_array_class = DB_localization[0][i][5];
let new_ele = document.createElement(DB_array_tag);
DB_array_element.appendChild(new_ele);
if (DB_array_class !== '') {
new_ele.setAttribute('class', DB_array_class);
}
}
array_path = DB_localization[0][i][0];
} else {
}
if (i 1 === DB_localization[0].length) {
apply_units();
}
}
});
function apply_units() {
/* applying the correct measurement units */
for (let i = 0; i < DB_localization[1].length; i ) {
let DB_array_element = DB_localization[1][i][1],
DB_array_value = DB_localization[1][i][2][language];
if (typeof DB_array_value !== 'undefined' &&
typeof DB_array_element !== 'undefined') {
DB_array_element.forEach(el => el.insertAdjacentHTML('beforeend', DB_array_value));
array_path = DB_localization[1][i][0];
} else {
}
}
}<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<title>Einstreu-Rechner</title>
</head>
<body>
<main class="py-l px-xl mx-auto mt-xl">
<!-- ----- Section: Title ----- -->
<h1 id="title"></h1>
<!-- ----- Section: Description ----- -->
<section id="description" title="Beschreibung über die Richtlininen des deutschen Standards">
<p class="text-align-justify" id="text-block-1"></p>
<p class="text-align-justify" id="text-block-2"></p>
<h3 class="text-align-center" id="sub-title-1"></h3>
<p class="text-align-center text-color-red" id="text-block-3"></p>
<h4 class="text-align-center" id="sub-title-2"></h4>
</section>
<!-- More Content -->
<p>This span works:</p>
<span class="unit-lenght"><span>uj5u.com熱心網友回復：
document.querySelectorAll('.unit-lenght')DOM 更改時不會更新。與其querySelectorAll()在創建陣列時呼叫，不如將選擇器放入DB_localization陣列中，在呼叫querySelectorAll()時呼叫forEach()。
var language = document.documentElement.lang.toLowerCase();
/* ----- locailization_database.js ----- */
var DB_localization = [
/* content */
[
[
'DB_localization/content/text-block-2a',
document.querySelector('#text-block-2'),
'text',
{
de: `In Deutschland gibt es noch keine Gesetze, die artgerechte Haltung
vorschreiben. Dennoch gibt es Richtlinien, nach welchen auch einige
Veterin?r?mter handeln.`,
us: 'not localized',
en: 'not localized'
}
],
[
'DB_localization/content/text-block-2b',
document.querySelector('#text-block-2'),
'tag',
{
de: '',
us: '',
en: ''
},
'br',
''
],
[
'DB_localization/content/text-block-2c',
document.querySelector('#text-block-2'),
'text',
{
de: `Die Tier?rztliche Vereinigung für Tierschutz e.V. (TVT), das
Bundesministerium für Ern?hrung und Landwirtschaft (BMEL) sowie der
Sachkundenachweis für Kleins?uger nach §11 Tierschutzgesetz, empfehlen ein
Gehegema? für alle Hamsterarten ab `
/*<span ></span>
<span ></span>. */
,
us: 'not localized',
en: 'not localized'
}
],
[
'DB_localization/content/text-block-2d',
document.querySelector('#text-block-2'),
'tag',
{
de: '',
us: '',
en: ''
},
'span',
'minimum-surface-area'
],
[
'DB_localization/content/text-block-2e',
document.querySelector('#text-block-2'),
'tag',
{
de: '',
us: '',
en: ''
},
'span',
'unit-lenght'
]
],
/* measurement units */
[
[
'DB_localization/units/lenght',
'.unit-lenght',
{
de: 'cm',
us: 'in',
en: 'cm'
}
],
[
'DB_localization/units/surface-area-A',
'.unit-surface-area-A',
{
de: 'm2',
us: 'not localized',
en: 'm2'
}
],
[
'DB_localization/units/surface-area-B',
'.unit-surface-area-B',
{
de: 'cm2',
us: 'ft2',
en: 'cm2'
}
],
[
'DB_localization/units/factor',
'.unit-factor',
{
de: 'x',
us: 'x',
en: 'x'
}
],
[
'DB_localization/units/minimum-surface-area',
'.minimum-surface-area',
{
de: '100x50',
us: '32x18',
en: '100x50'
}
],
]
];
/* ----- localization.js ----- */
window.addEventListener('load', function() {
/* loading unique elements */
for (let i = 0; i < DB_localization[0].length; i ) {
let DB_array_element = DB_localization[0][i][1],
DB_array_type = DB_localization[0][i][2],
DB_array_value = DB_localization[0][i][3][language];
if (typeof DB_array_element !== 'undefined' &&
typeof DB_array_type !== 'undefined' &&
typeof DB_array_value !== 'undefined') {
if (DB_array_type == 'text') {
DB_array_element.insertAdjacentHTML('beforeend', DB_array_value);
}
if (DB_array_type == 'tag') {
let DB_array_tag = DB_localization[0][i][4],
DB_array_class = DB_localization[0][i][5];
let new_ele = document.createElement(DB_array_tag);
DB_array_element.appendChild(new_ele);
if (DB_array_class !== '') {
new_ele.setAttribute('class', DB_array_class);
}
}
array_path = DB_localization[0][i][0];
} else {
}
if (i 1 === DB_localization[0].length) {
apply_units();
}
}
});
function apply_units() {
/* applying the correct measurement units */
for (let i = 0; i < DB_localization[1].length; i ) {
let DB_array_element = document.querySelectorAll(DB_localization[1][i][1]),
DB_array_value = DB_localization[1][i][2][language];
if (typeof DB_array_value !== 'undefined' &&
typeof DB_array_element !== 'undefined') {
DB_array_element.forEach(el => el.insertAdjacentHTML('beforeend', DB_array_value));
array_path = DB_localization[1][i][0];
} else {
}
}
}<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<title>Einstreu-Rechner</title>
</head>
<body>
<main class="py-l px-xl mx-auto mt-xl">
<!-- ----- Section: Title ----- -->
<h1 id="title"></h1>
<!-- ----- Section: Description ----- -->
<section id="description" title="Beschreibung über die Richtlininen des deutschen Standards">
<p class="text-align-justify" id="text-block-1"></p>
<p class="text-align-justify" id="text-block-2"></p>
<h3 class="text-align-center" id="sub-title-1"></h3>
<p class="text-align-center text-color-red" id="text-block-3"></p>
<h4 class="text-align-center" id="sub-title-2"></h4>
</section>
<!-- More Content -->
<p>This span works:</p>
<span class="unit-lenght"><span>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/496243.html
標籤：javascript html