提问人：Emil 提问时间：11/11/2023 最后编辑：vanowmEmil 更新时间：11/11/2023 访问量：21
动态布局克隆
Dynamic Layout Cloning
问：
我想在 2 个 HTML 页面布局（layout1 和 layout2）之间切换，其中 layout2 是从 layout1 派生（克隆）的，因为它们几乎相同。我已将我的项目简化为这个小示例，它显示了我的问题：layout1 在第二次单击按钮时不会再次出现。有人可以给我一个提示，为什么会这样吗？提前非常感谢您：
let active_layout = 1;
document.addEventListener('DOMContentLoaded', function () {
const button = document.getElementById('button');
const layout1 = document.getElementById('layout1');
const layout2 = document.getElementById('layout2');
layout2.classList.add('hidden');
button.addEventListener('click', function () {
if (active_layout === 1) {
let elm_cloned = layout1.cloneNode(true);
elm_cloned.querySelector('h1').textContent = 'Layout 2';
elm_cloned.querySelector('p').textContent = 'This is layout 2.';
layout2.innerHTML = '';
layout2.appendChild(elm_cloned);
layout1.classList.add('hidden');
layout2.classList.remove('hidden');
} else {
layout1.classList.remove('hidden');
layout2.classList.add('hidden');
}
active_layout = (active_layout === 1) ? 2 : 1;
});
});.layout1,
.layout2 {
background-color: #f0f0f0;
padding: 20px;
margin: 10px;
}
.layout1.hidden,
.layout2.hidden {
display: none;
}<div class="layout1" id="layout1">
<h1>Layout 1</h1>
<button id="button">Switch Layout</button>
<p>This is layout 1.</p>
</div>
<!-- Layout 2 -->
<div class="layout2" id="layout2">
<!-- Content of Layout 2 will be cloned from Layout 1 during runtime -->
</div>答：
2赞
vanowm
11/11/2023
#1
问题在于事件侦听器不会与 DOM 一起克隆/传输。
因此，如果将按钮移到 layout1 之外，它就可以正常工作：
let active_layout = 1;
document.addEventListener('DOMContentLoaded', function () {
const button = document.getElementById('button');
const layout1 = document.getElementById('layout1');
const layout2 = document.getElementById('layout2');
layout2.classList.add('hidden');
button.addEventListener('click', function () {
if (active_layout === 1) {
let elm_cloned = layout1.cloneNode(true);
elm_cloned.querySelector('h1').textContent = 'Layout 2';
elm_cloned.querySelector('p').textContent = 'This is layout 2.';
layout2.innerHTML = '';
layout2.appendChild(elm_cloned);
layout1.classList.add('hidden');
layout2.classList.remove('hidden');
} else {
layout1.classList.remove('hidden');
layout2.classList.add('hidden');
}
active_layout = (active_layout === 1) ? 2 : 1;
});
});.layout1,
.layout2 {
background-color: #f0f0f0;
padding: 20px;
margin: 10px;
}
.layout1.hidden,
.layout2.hidden {
display: none;
}<button id="button">Switch Layout</button>
<div class="layout1" id="layout1">
<h1>Layout 1</h1>
<p>This is layout 1.</p>
</div>
<!-- Layout 2 -->
<div class="layout2" id="layout2">
<!-- Content of Layout 2 will be cloned from Layout 1 during runtime -->
</div>此外，您应该将添加/删除 DOM 元素移动到事件侦听器之外，并且只在侦听器中操作样式：
let active_layout = 1;
document.addEventListener('DOMContentLoaded', function () {
const button = document.getElementById('button');
const layout1 = document.getElementById('layout1');
const layout2 = document.getElementById('layout2');
layout2.classList.add('hidden');
let elm_cloned = layout1.cloneNode(true);
elm_cloned.querySelector('h1').textContent = 'Layout 2';
elm_cloned.querySelector('p').textContent = 'This is layout 2.';
layout2.innerHTML = '';
layout2.appendChild(elm_cloned);
button.addEventListener('click', function () {
if (active_layout === 1) {
layout1.classList.add('hidden');
layout2.classList.remove('hidden');
} else {
layout1.classList.remove('hidden');
layout2.classList.add('hidden');
}
active_layout = (active_layout === 1) ? 2 : 1;
});
});.layout1,
.layout2 {
background-color: #f0f0f0;
padding: 20px;
margin: 10px;
}
.layout1.hidden,
.layout2.hidden {
display: none;
}<button id="button">Switch Layout</button>
<div class="layout1" id="layout1">
<h1>Layout 1</h1>
<p>This is layout 1.</p>
</div>
<!-- Layout 2 -->
<div class="layout2" id="layout2">
<!-- Content of Layout 2 will be cloned from Layout 1 during runtime -->
</div>评论
0赞
Emil
11/11/2023
好的，我现在明白了 - 谢谢！
评论