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>

我的目标是当我们单击任一div时都变成蓝色。在此示例中，div中只有一个在您单击时变成蓝色，而不是同时变蓝。我该如何实现？

Answer 1

$（this）仅指向当前元素，在这里您想在同一个类的两个div上应用颜色。因此，使用$（“。one”）

尝试一下-

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

clonedEle.insertAfter(".one");

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

希望这会对您有所帮助。

Answer 2

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

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>

尝试在浏览器的开发人员工具中更改任何style元素的my-div属性。您会看到，您赋予my-div的任何内联样式也将自动应用于文档上的任何其他my-div。

创建div的深层副本

2 个答案: