Jquery重复总和到其他div

时间:2017-10-12 02:02:36

标签: javascript jquery

我有以下代码可以工作,如果我为“Cabinet Width”输入输入一个数字,它会输出div class =“sum”中的总和

我还需要它将该总和复制到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>

2 个答案:

答案 0 :(得分:1)

最简单的解决方案是将view controller类添加到您希望受输入影响的节点:

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>

答案 1 :(得分:1)

您可以将多个元素链接到var divdrag32 = $("#div3").length; var divdrag42 = $("#div4").length; if (divdrag42 > 2 || div === "div4") { $("#div4").find(".drag1, .drag2")[2].remove(); } else if (divdrag32 > 2 || div === "div3") { $("#div3").find(".drag1, .drag2")[2].remove(); } 内的输出。将.find()替换为$(this).parent().find(".sum").text(value)会同时将值输出到所有五个元素。

或者,您只需将类$(this).parent().find(".sum, .cal1, .cal2, .cal3, .cal4").text(value)添加到每个所需的目标元素即可。

希望这有帮助! :)

...此外,此代码显示为familiar;)

sum
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);
    }
  });
});