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

时间:2017-02-05 10:28:31

标签: javascript jquery html foreach

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

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

目前我只能使用下面的循环复制最后一个font-size值。

$('.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>

2 个答案:

答案 0 :(得分:2)

你可以这样做:

&#13;
&#13;
#include <stdio.h>
#include <stdlib.h>

#define SIZE 5

int main(void) {
    int array[SIZE], min, max;

    printf("Enter %d numbers:\n", SIZE);
    for (size_t i = 0; i < SIZE; i++) {
        if (scanf("%d", &array[i]) != 1) {
            printf("Invalid number entered\n");
            exit(EXIT_FAILURE);
        }
    }

    max = min = array[0];
    for (size_t i = 1; i < SIZE; i++) {
        if (array[i] > max) {
            max = array[i];
        } else if (array[i] < min) {
            min = array[i];
        }
    }

    printf("Maximum: %d\nMinimum: %d\n", max, min);

    return 0;
}
&#13;
$('.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'));
    });
})
&#13;
/* 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}
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您可以尝试这样

&#13;
&#13;
$('.original').click(function() {
    $('.'+$(this).data('target')).html($(this).html());
})
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

  

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