jQuery的複製和到其他的div

Question

我有以下的代碼工作，如果我輸入了「內閣寬度」輸入一個數字，它輸出DIV類的總和=「和」

我也需要它將該總和複製到div class =「cal1」cal2 cal3等中。

有沒有辦法做到這一點？

這裏是例子：JSFIDDLE

代碼：

function clone() { 
 
    $(this).parents(".clonedInput").clone() 
 
    .appendTo("body") 
 
    .find("*") 
 
    .on('click', 'button.clone', clone) 
 
    .on('click', 'button.remove', remove); 
 
} 
 

 
function remove() { 
 
    $(this).parents(".clonedInput").remove(); 
 
} 
 
$("button.clone").on("click", clone); 
 

 
$("button.remove").on("click", remove); 
 

 
// calculator 
 
$(document).ready(function() { 
 
    $("body").on("keyup change", ".calculate", function(e) { 
 
    var cabwidth = parseFloat($(this).val()) || 0; 
 
    var ply = 1.4375; 
 
    var value = cabwidth - ply; 
 

 
    if (!isNaN(value) && value !== Infinity) { 
 
     $(this).parent().find(".sum").text(value); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="clonedInput"> 
 
    <input type="text" class="calculate" placeholder="Cabinet Width"> 
 
    <div class="sum"></div> 
 

 
    <div class="cal1">duplicate sum here</div> 
 
    <div class="cal2">duplicate sum here</div> 
 
    <div class="cal3">duplicate sum here</div> 
 
    <div class="cal4">duplicate sum here</div> 
 

 
    <div class="actions"> 
 
    <button class="clone">Add</button> 
 
    <button class="remove">Remove</button> 
 
    </div> 
 
</div>

Answer 1

最簡單的解決方法是sum類添加到您想通過輸入影響的節點：

<div class="sum cal1">duplicate sum here</div> 
<div class="sum cal2">duplicate sum here</div> 
<div class="sum cal3">duplicate sum here</div> 
<div class="sum cal4">duplicate sum here</div> 

所以他們都將在遊戲中通過

$(this).parent().find(".sum").text(value); 

Answer 2

你可以連續使用多個元素輸出到你的一次的.find()裏面。用
代替$(this).parent().find(".sum").text(value)$(this).parent().find(".sum, .cal1, .cal2, .cal3, .cal4").text(value)將同時向所有五個元素輸出值。

或者，您可以簡單地將類sum添加到每個所需的目標元素。

希望這會有所幫助！ :)

...同時，這個代碼看起來familiar;）

function clone() { 
 
    $(this).parents(".clonedInput").clone() 
 
    .appendTo("body") 
 
    .find("*") 
 
    .on('click', 'button.clone', clone) 
 
    .on('click', 'button.remove', remove); 
 
} 
 

 
function remove() { 
 
    $(this).parents(".clonedInput").remove(); 
 
} 
 
$("button.clone").on("click", clone); 
 

 
$("button.remove").on("click", remove); 
 

 
// calculator 
 
$(document).ready(function() { 
 
    $("body").on("keyup change", ".calculate", function(e) { 
 
    var cabwidth = parseFloat($(this).val()) || 0; 
 
    var ply = 1.4375; 
 
    var value = cabwidth - ply; 
 

 
    if (!isNaN(value) && value !== Infinity) { 
 
     $(this).parent().find(".sum, .cal1, .cal2, .cal3, .cal4").text(value); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="clonedInput"> 
 
    <input type="text" class="calculate" placeholder="Cabinet Width"> 
 
    <div class="sum"></div> 
 

 
    <div class="cal1">duplicate sum here</div> 
 
    <div class="cal2">duplicate sum here</div> 
 
    <div class="cal3">duplicate sum here</div> 
 
    <div class="cal4">duplicate sum here</div> 
 

 
    <div class="actions"> 
 
    <button class="clone">Add</button> 
 
    <button class="remove">Remove</button> 
 
    </div> 
 
</div>