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>