Я пытаюсь создать глубокую копию 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 становится синим, когда вы нажимаете на них, а не на оба одновременно. Как мне этого добиться?

0
user2896120 11 Апр 2019 в 08:41

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 в документе.

2
connexo 11 Апр 2019 в 06:05

$ (this) указывает только на текущий элемент, и здесь вы хотите применить цвет для обоих div с одним и тем же классом. Итак, используйте $ (". One")

Попробуй это -

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

clonedEle.insertAfter(".one");

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

Надеюсь, что это поможет вам.

2
Suniti Yadav 11 Апр 2019 в 05:45