如何通过他们的ID减去两个div？

Question

我有一些范围滑块和输入字段。从中我得到一些方程，现在我想用它们的 ID 减去这些动态数字。下面是代码，但我得到的是 NaN 值。下面的步骤，我已经完成了。

1. 从范围滑块和 .averagetime 的乘积中得到 #totalavgtime
2. 从范围滑块和 .radio-roi 下一个输入值的乘积中获取 #timetoproduce。
3. 现在尝试减去 #totalavgtime - #timetoproduce 但在 #timesaving 中得到 NaN 值。

$(document).ready(function() {
  $(".range").on("change", function() {
    var mult = 0;
    $('.range').each(function(i) {
      var selector_next = parseInt($(".averagetime:eq(" + i + ")").attr("value"))
      mult += parseInt($(this).val()) * selector_next //multply..
      console.log($(".averagetime:eq(" + i + ")").attr("value"), $(this).val())
    })
    $("#totalavgtime").val(mult)
  })
});

$(document).ready(function() {
  $('.range').on('change', function() {
    let n  = $(this).attr('id').match(/\d+/g)[0];
    let total = 0;
    let checkVal = $('.radio-roi:checked').next('input').val();
    let multiplyFactor = parseFloat(checkVal);
    console.log(multiplyFactor)
    $('.range').each(function() {
      total += (parseFloat($(this).val()) * multiplyFactor);
    });
    $('#timetoproduce').value(total);
  })
});

$(document).ready(function() {
  var txt1 = parseInt(document.getElementById("totalavgtime").value);
  var txt2 = parseFloat(document.getElementById("timetoproduce").value);
  var res = document.getElementById("timesaving");
  Number(txt1);
  Number(txt2);
  
 //Substract that
  res.value = txt1 - txt2;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<input type="radio" id="" class="radio-roi" name="plan" value="plus" checked>
<input type="text" value="2.5" id="actualtime2" class="hiden-actual-time" disabled><br>

<input type="radio" id="" class="radio-roi" name="plan" value="pro">
<input type="text" value="3" id="actualtime3" class="hiden-actual-time" disabled><br>

<input type="text"value="6" id="avgtime-id" class="averagetime"disabled><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="range" id="range-slider"><br>


<input type="text"id="totalavgtime" value="" disabled><br>
<input type="text"id="timetoproduce" value="" disabled><br>
<input type="text"id="timesaving" value="" disabled><br>

Answer 1

您可以将两个事件处理程序合并为一个，因为两者都触发相同的元素。因此，在每次迭代中获取范围滑块的值并将总计添加到同一变量并将它们设置为所需的输入。现在，要减去它们，根据输入的这个取值检查值是否不为空，否则取 0 以避免 NaN 错误。

演示代码：

$(document).ready(function() {
  $(".range").on("change", function() {
    $(this).next().text($(this).val()) //for output(range)
    var selector_next_avg = 0;
    var timetoproduce = 0
    var checkVal = parseFloat($('.radio-roi:checked').next('input').val()); //radio next input
    $('.range').each(function(i) {
      var selector_next = parseInt($(".averagetime:eq(" + i + ")").val()) //avg..input
      selector_next_avg += parseInt($(this).val()) * selector_next;
      timetoproduce += (parseFloat($(this).val()) * checkVal);

    })
    //set both values
    $("#totalavgtime").val(selector_next_avg)
    $('#timetoproduce').val(timetoproduce);
    total() //call to total..(sub)
  })
});



function total() {
  var txt1 = $("#totalavgtime").val() != "" ? parseFloat($("#totalavgtime").val()) : 0; //if null take 0
  var txt2 = $("#timetoproduce").val() != "" ? parseFloat($("#timetoproduce").val()) : 0;
  $("#timesaving").val(txt1 - txt2); //set value

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<input type="radio" id="" class="radio-roi" name="plan" value="plus" checked>
<input type="text" value="2.5" id="actualtime2" class="hiden-actual-time" disabled><br>

<input type="radio" id="" class="radio-roi" name="plan" value="pro">
<input type="text" value="3" id="actualtime3" class="hiden-actual-time" disabled><br>

<input type="text" value="6" id="avgtime-id" class="averagetime" disabled><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="range" id="range-slider"><output></output><br>


<input type="text" id="totalavgtime" value="" disabled><br>
<input type="text" id="timetoproduce" value="" disabled><br>
<input type="text" id="timesaving" value="" disabled><br>