jquery - 通过 jQuery 在 DIV 之间复制选定的 CSS 样式

Question

我想将一些 CSS 样式从一个 DIV 复制到另一个 DIV。

1. 单击“一个”DIV

2. 然后 jQuery 从 ARRAY 读取 CSS 属性列表

3. 然后将这些属性从 DIV "ONE" 复制到 DIV "TWO"。

这是我的尝试，但它不起作用。它出什么问题了？

“JsFiddle 示例”。

HTML

 <div class="one">Click HERE on this DIV, to TRANSFER CSS properties From this ONE</div>
 <div class="two">To this TWO</div>

CSS

* {
   background-color:gray;
}
.one {
   color: red;
   font-size:12px;
   width: 100px;
   height: 100px;
   background-color: white;
   margin: 20px;
   padding: 20px;
   font-weight: bold;
}
.two {
   font-size:20px;
   color: blue;
   width: 200px;
   height: 200px;
   background-color: yellow;
   margin: 20px;
   padding: 20px;
}

jQuery

 $(document).ready(function(){
     $("div.one").click(function(){
         var $array = ['color','width','height', 'background-color', 'font-weight', 'font-size'];
         $(this).each( $array , function(item, value){
             $("div.two").css(value, $(this).css(value));
         });
     });
 });

Answer 1

1. jQuery在 JSFiddle 的左侧面板中选择。
   
2. 使用$.each(array, fn)而不是$().each(array, fn).
3. 存储$(this)在变量中，例如$this = $(this). 在循环内部，this指的是数组元素，而不是被点击的 DOM 元素。
4. （非关键）不要在非 jQuery 对象前加上$.

演示：http: //jsfiddle.net/meU9M/2/

$(document).ready(function(){
    $("div.one").click(function(){
        var array = ['color','width','height', 'background-color', 'font-weight', 'font-size'];
        var $this = $(this);
        $.each( array , function(item, value) {
            $("div.two").css(value, $this.css(value));
        });
    });
});