是否可以同时更改克隆和原始元素？ - jQuery

Question

我有一个元素在 div 父元素中有一个克隆。我想单击 clone 并更改此克隆及其原始元素的 css。但与此同时，如果我首先单击 original 元素，我想更改原始元素及其克隆。

可以吗？

HTML

<div id="parent">
  <div class="hello">
  Hello
  </div>
</div>

CSS

.hello {
  width: 100px;
  height: 100px;
  color: #fff;
  background-color: #000;
  margin: 10px;
}

JAVASCRIPT

$('.hello').clone().appendTo('#parent');
$('.hello').on('click',function(){
    $(this).css('background-color','red');
});

这里是 jsfiddle：https://jsfiddle.net/vcyLkdas/

$('.hello').clone().appendTo('#parent');

$('.hello').on('click',function(){
 $(this).css('background-color','red');
});

.hello {
  width: 100px;
  height: 100px;
  color: #fff;
  background-color: #000;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div class="hello">
Ciao
</div>
</div>

Answer 1

在您的处理程序中将 $(this) 替换为 $(".hello")。

$(".hello").clone().appendTo("#parent");

$(".hello").on("click", function () {
  $(".hello").css("background-color", "red");
});

.hello {
  width: 100px;
  height: 100px;
  color: #fff;
  background-color: #000;
  margin: 10px;
}

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

<div id="parent">
  <div class="hello">
    Ciao
  </div>
</div>

Answer 2

在jQuery点击事件中，"this"仅指被点击的元素，而不是class.hello的所有元素。因此，您需要将 "this" 更改为 ".hello" :

$('.hello').on('click',function(){
    $('.hello').css('background-color','red');
});

是否可以同时更改克隆和原始元素？ - jQuery

Is it possible to change the clone and the original element at the same time? - jQuery

html

javascript

css

jquery

clone