Javacript - ある要素から別の要素への値のコピー

Question

私は2つの要素のペアを持っています。最初のペアは.originalです。それぞれ、特定のフォントサイズを持つ子要素が含まれています。 2番目は.copyで、子要素内にfont-sizeは定義されていません。

.original要素の1つをクリックすると、同じインデックスの.copy要素の子要素に、子要素からのCSS をコピーする必要があります。たとえば、ユーザーが最初に.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属性が追加されました。