创建div的深层副本

Question

我正在尝试创建一个div的深层副本。我的意思是，当div的克隆副本改变颜色时，原来的div也应该改变颜色。

克隆或原始内容中发生的情况也应该发生在其他克隆中。这是一个JsFiddle

let clonedEle = $(".one").clone();
    
clonedEle.insertAfter(".one");
    
$(".one").click(function() {
    $(this).css("background-color", "blue");
});

.one {
    background-color: red;
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="one">
    
</div>

我的目标是当我们点击任何一个时，让两个divs变蓝。在此示例中，当您单击它们时，只有一个divs变为蓝色，而不是同时变为蓝色。我该如何实现这一目标？

Answer 1

这只是一个如何使用自定义内置元素解决此问题的示例：

class MyDiv extends HTMLDivElement {
  connectedCallback() {
    this.addEventListener('click', () => {
      this.setAttribute('style', 'background-color: #999');
    })
  }
  
  static get observedAttributes() { return ['style'] }
  
  attributeChangedCallback(attr, oldVal, newVal) {
    switch (attr) {
      case 'style':
        if (oldVal === newVal) break; // avoid infinite loops
        const myDivs = document.querySelectorAll('[is="my-div"]');
        for (const div of myDivs) { div.setAttribute('style', newVal) };
        break;
    }
  }
}

customElements.define('my-div', MyDiv, { extends: 'div' });

cloneBtn.addEventListener('click', (e) => {
  let theDiv = e.target.nextElementSibling.cloneNode(true);
  document.body.appendChild(theDiv);
})

<button type="button" id="cloneBtn">Clone the div</button>
<div is="my-div">my div</div>

尝试在浏览器的开发人员工具中更改任何styleelements的my-div属性。您将看到您为my-div提供的任何内联样式也会自动应用于文档中的任何其他my-div。

Answer 2

$（this）仅指向当前元素，此处您希望在具有相同类的div上应用颜色。所以，使用$（“。one”）

试试这个 -

let clonedEle = $(".one").clone();

clonedEle.insertAfter(".one");

$(".one").click(function() {
  $(".one").css("background-color", "blue");
});

希望这会帮助你。