jQuery从任何值中减去值

Question

我有完整的持续时间分为几个部分，

用户必须指定所有部分的持续时间

我希望当用户输入任何部分的任何持续时间以从完整持续时间输出剩余时间，无论他是否按顺序填充部分

$(".paragraphDuration").bind('keyup', function() {
  var fullDuration = $("#fullDuration").val(),
    paragraphDuration = $(this).val();
  $(this).next('.durationSpan').text(
    $(this).val() !== '' ? (fullDuration - paragraphDuration + " min") : "");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Full Duration
<input type="text" id="fullDuration" />
<p>Section1
  <input type='text' class='paragraphDuration' /><span class='durationSpan'></span>

</p>
<p>Section2
  <input type='text' class='paragraphDuration' /><span class='durationSpan'></span>

</p>
<p>Section3
  <input type='text' class='paragraphDuration' /><span class='durationSpan'></span>

</p>

所有部分都从完整持续时间中减去！

更新 结果应该是这样的：

50 - 5  = 45 min
45 - 10 = 35 min
35 - 30 = 5  min
5  - 5  = 0  min

有没有办法从剩余的持续时间中减去？

谢谢

UPDATE2： https://jsfiddle.net/vc9hryw6/

Answer 1

为了解决您的问题，您需要在每个段落的隐藏字段中存储累积值。检查下面的代码，看看它是如何实现的。另请注意，此代码使用您的构造作为解决方案。

<强> HTML

Full Duration
<input type="text" id="fullDuration" />
<p>Section1
    <input type='text' class='paragraphDuration' /><span class='durationSpan'></span>
    <input type="hidden" class="remainderDuration" value="0" />
</p>
<p>Section2
    <input type='text' class='paragraphDuration' /><span class='durationSpan'></span>
    <input type="hidden" class="remainderDuration" value="0" />
</p>
<p>Section3
    <input type='text' class='paragraphDuration' /><span class='durationSpan'></span>
    <input type="hidden" class="remainderDuration" value="0" />
</p>

<强>的Javascript

$(".paragraphDuration").bind('keyup', function () {

    var fullDuration = $("#fullDuration").val();
    var paragraphDuration = $(this).val();

    // here we get the last paragraph reminder duration - if none if found we retrieve the full duration value
    var lastParagraphremainderDuration = $(this).parent().prev().children(".remainderDuration").val() != undefined ? $(this).parent().prev().children(".remainderDuration").val() : fullDuration;

    // the current reminder duration is the subtractnion of the last paragraph's one and the current paragraph duration
    var remainderDuration = lastParagraphremainderDuration - paragraphDuration;

    // store the current paragraph durantion in the current hidden field
    $(this).next().next('.remainderDuration').val(remainderDuration);

    // assign value based on the current reminder duration
    $(this).next('.durationSpan').text(
        $(this).val() !== '' ? (remainderDuration + " min") : "");
});

这是jsfiddle。

Answer 2

您需要使用.each()：

分别迭代每个输入字段

function updateSpans(totalDuration)
{
    $('.paragraphDuration').each(function() {
        totalDuration -= $(this).val(); // update total
        $(this).next('.durationSpan').text(totalDuration);
    });
}

然后，你这样调用函数：

updateSpans($("#fullDuration").val());

function updateSpans(totalDuration)
{
    $('.paragraphDuration').each(function() {
        var currentDuration = +$(this).val();
        totalDuration -= currentDuration;
        $(this).next('.durationSpan').text(totalDuration);
    });
}

$(".paragraphDuration").bind('keyup', function() {
  var fullDuration = $("#fullDuration").val();
  updateSpans(fullDuration);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Full Duration
<input type="text" id="fullDuration" />
<p>Section1
  <input type='text' class='paragraphDuration' /><span class='durationSpan'></span>

</p>
<p>Section2
  <input type='text' class='paragraphDuration' /><span class='durationSpan'></span>

</p>
<p>Section3
  <input type='text' class='paragraphDuration' /><span class='durationSpan'></span>

</p>