代码之家 › 专栏 › 技术社区 › Emil

动态布局克隆

switching clone layout html javascript

Emil · 技术社区 · 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>

1 回复 | 直到 2 年前

vanowm 2 年前

问题是事件侦听器没有与DOM一起克隆/传输。

所以,如果您将按钮移动到布局1之外,它工作得很好:

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;
    });
});

.布局1,
.布局2{
背景颜色:#f0f0f0;
填充:20px;
边距:10px;
}
.layout1.hidden,
.layout2.hidden{
显示:无;
}

<button id=“button”>交换机布局</按钮>
<div class=“layout1”id=“layout 1”>
<h1>布局1</h1>
<p>这是布局1。</p>
</div>
<!--布局2->
<div class=“layout2”id=“layout 2”>
<!--将在运行时从布局1克隆布局2的内容-->
</div>