将值从一个元素复制到另一个元素

Question

我有两对元素。第一对是.original，它包含子元素，每个子元素都有特定的字体大小。第二个是.copy，它的子元素中没有定义字体大小。

当用户单击.original 元素之一时，它应该将css font-size 从其子元素复制到具有相同索引的.copy 元素的子元素。例如，如果用户单击第一个 .original 元素，则 font-size 值应复制到第一个 .copy 元素的子元素。

目前我只能用下面的循环复制最后一个字体大小值。

$('.original').click(function() {
    $(this).find('div').each(function(i) {
      font = $(this).css('font-size');
      len  = $(this).length;
      for (var i = 0; i < len; i++) {
        $('.copy div').css('font-size', font)
      }
    })
})

div {
  display: inline-block;
  width: 100%;
}
div > div {
  display: inline-block;
  content: "";
  width: 30px;
  height: 30px;
  float: left;
}
.original {
  background: #bbb;
  cursor: pointer;
}
.original > div {
  padding-right: 10px;
}
.copy {
  width: 100%;
  display: block;
  margin-top: 20px;
  clear: both;
}
.copy > div {
  font-size: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="t-1 original">
  <div style="font-size: 14px">Test</div>
  <div style="font-size: 16px">Test</div>
  <div style="font-size: 18px">Test</div>
</div>
<div class="t-2 original">
  <div style="font-size: 20px">Test</div>
  <div style="font-size: 22px">Test</div>
  <div style="font-size: 24px">Test</div>
</div>


<div class="t-1 copy">
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>
<div class="t-2 copy">
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>

Answer 1

你可以这样做：

$('.original').click(function() {
    var original_divs = $(this).find('div'),
        index = $(this).index('.original');
    $('.copy').eq(index).find('div').each(function(i) {
        $(this).css('font-size', original_divs.eq(i).css('font-size'));
    });
})

/* Your original CSS */ div,div>div{display:inline-block}div{width:100%}div>div{content:"";width:30px;height:30px;float:left}.original{background:#bbb;cursor:pointer}.original>div{padding-right:10px}.copy{width:100%;display:block;margin-top:20px;clear:both}.copy>div{font-size:10px}

<!-- Your original HTML --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="t-1 original"> <div style="font-size: 14px">Test</div><div style="font-size: 16px">Test</div><div style="font-size: 18px">Test</div></div><div class="t-2 original"> <div style="font-size: 20px">Test</div><div style="font-size: 22px">Test</div><div style="font-size: 24px">Test</div></div><div class="t-1 copy"> <div>Test</div><div>Test</div><div>Test</div></div><div class="t-2 copy"> <div>Test</div><div>Test</div><div>Test</div></div>

Answer 2

你可以这样尝试

$('.original').click(function() {
    $('.'+$(this).data('target')).html($(this).html());
})

div {
  display: inline-block;
  width: 100%;
}
div > div {
  display: inline-block;
  content: "";
  width: 50px;
  height: 30px;
  float: left;
}
.original {
  background: #bbb;
  cursor: pointer;
}
.original > div {
  padding-right: 10px;
}
.copy {
  width: 100%;
  display: block;
  margin-top: 20px;
  clear: both;
}
.copy > div {
  font-size: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="t-1 original" data-target="t-1-paste">
  <div style="font-size: 14px">Test</div>
  <div style="font-size: 16px">Test</div>
  <div style="font-size: 18px">Test</div>
</div>
<div class="t-2 original" data-target="t-2-paste">
  <div style="font-size: 20px">Test</div>
  <div style="font-size: 22px">Test</div>
  <div style="font-size: 24px">Test</div>
</div>


<div class="t-1-paste">
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>
<div class="t-2-paste">
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>

注意：为粘贴目标添加了data-target 属性。