JQuery для сложения <output>значений тегов

Question

Мне интересно, может ли кто-нибудь помочь мне с небольшим количеством кода, который я собираю в основном за счет ваших щедрых пожертвований:

У меня есть часть страницы оформления заказа с несколькими различными входами, влияющими на значение различных выходов, работающих должным образом.

Теперь я хотел бы просуммировать общее количество .editOutputs для вычисления промежуточного итога #editS.

Вот мой html:

<h1>Song Length</h1>


     <div class="slidecontainer">
    <input type="range" min="1" max="5" value="3" step="0.5" class="slider" id="songRange">
    <p>Song Length: <span id="songLength"></span></p>
  </div>



    <div>
        <label for="tracks">How many tracks?</label>
        <select id="tracks">
            <option selected value="0">How Many Tracks?</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
            <option value="6">Six</option>
            <option value="7">Seven</option>
            <option value="8">Eight</option>
            <option value="9">Nine</option>
        </select> 

    <div>   
        <input type="checkbox" id="tuningCheck" name="tuning" value="10">
        <label for="tuning">Vocal Tuning</label>
    </div>

    Tuning cost: £ <output class="editOutput" id="tuningC" name="tuningCost"></output>

         <div>   
        <input type="checkbox" id="tempoCheck" name="tempo" value="10">
        <label for="tempo">Tempo Change</label>
    </div>

        Tempo cost: £ <output class="editOutput" id="tempoC" name="tempoCost"></output>

        <div>   
        <input type="checkbox" id="keyCheck" name="key" value="10">
        <label for="key">Key Change</label>
    </div>

        Key cost: £ <output class="editOutput" id="keyC" name="keyCost"></output>

        <div>
    Editing Subtotal : £ <output class="subtotal" id="editS" name="editSubtotal"></output>
  </div>

Вот JQuery, которые у меня есть:

<script>

    //slider

    (function($) {

var slider = document.getElementById("songRange");
var output = document.getElementById("songLength");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}}
);

    //tuning cost

(function($) {

  var slider = $('#songRange'),
    tracks = $('#tracks'),
    checkbTC = $('#tuningCheck'),
    outputTC = $('#tuningC');

  var onChange = function() {
    if (!checkbTC.is(':checked')) {
      outputTC.text('')
    } else {
      var sliderVal = slider.val(),
        tracksVal = tracks.val(),
        checkbTCVal = checkbTC.val()

      outputTC.text(sliderVal * tracksVal * checkbTCVal)
    }
  }

  $(document).on('input change', '#songRange', onChange);
  $(document).on('change', '#tracks', onChange);
  $(document).on('change', '#tuningCheck', onChange);

})(jQuery);

    //tempo cost

    (function($) {

  var 
    checkbTeC = $('#tempoCheck'),
    outputTeC = $('#tempoC');

  var onChange = function() {
    if (!checkbTeC.is(':checked')) {
      outputTeC.text('')
    } else {
      var checkbTeCVal = checkbTeC.val()

      outputTeC.text(checkbTeCVal)
    }
  }


  $(document).on('change', '#tempoCheck', onChange);

})(jQuery);

    //key cost

    (function($) {

  var 
    checkbKeC = $('#keyCheck'),
    outputKeC = $('#keyC');

  var onChange = function() {
    if (!checkbKeC.is(':checked')) {
      outputKeC.text('')
    } else {
      var checkbKeCVal = checkbKeC.val()

      outputKeC.text(checkbKeCVal)
    }
  }


  $(document).on('change', '#keyCheck', onChange);

})(jQuery);






</script>

Answer 1

Это довольно просто с Jquery (которое, как я вижу, вы используете!)

Вам нужно l oop над каждым элементом с классом editOuput, взять его значение и добавить его в Общая стоимость. Примерно так.

  //initalise the totalValue outside the .each function, dont want it being over wrote everytime!
  var totalValue = 0;
  //for each element with the class .editOutput
  $('.editOutput').each(function() {
  //get a reference to the current element
  var currentElement = $(this);
  //get a reference to its value
  var value = currentElement.text(); // if it is an input/select/textarea field use Val but for paragraph tag, use Text()
  //add this to the total
  //make sure we tell Javascript it wants to be treated as a number
  totalValue += parseInt(value);
});

// готово!

// A $( document ).ready() block.
$(document).ready(function(){
   let totalValue = 0;
   let totalValueField = $('#totalValueField');
   //set the sub total when the page loads
   totalValueField.text(TotalForEachOutput());
   
   //Again using Jquery
   //for each element of type checkbox
   //bind an event that fires whenever they are changed
   	$(".checkbox").change(function()
   	{        
        //update our field with the new value
        totalValueField.text(TotalForEachOutput() + TotalForEachCheckedBox());
  	});

//Loop over each checkbox, ask if it is ticked, if it is, we need its value and we add it to the total value, then return that totalValue.
function TotalForEachCheckedBox()
{
  let totalValue = 0;
    $('.checkbox').each(function()
    {
      if($(this).is(':checked'))
      {
            //get a reference to the current element
        var currentElement = $(this);
        //get a reference to its value
        var value = currentElement.val(); 
        //add this to the total
        //tell JS to treat the text as a number
        totalValue += parseInt(value);
       //console.log(totalValue);
      }

  });  
  return parseInt(totalValue);
}

//this is the function from earlier, functionally identical except it iterates over any element with '.editOuput' class using '.text()' instead of '.val()'
function TotalForEachOutput()
{
  let totalValue = 0;
    $('.editOutput').each(function()
    {
      //get a reference to the current element
      var currentElement = $(this);
      //get a reference to its value
      var value = currentElement.text(); 
      //add this to the total
      //tell JS to treat the text as a number
      totalValue += parseInt(value);
     //console.log(totalValue);
  });
  
  return parseInt(totalValue);
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p class="editOutput"> 100 </p>
  <p class="editOutput"> 22 </p>
  <p class="editOutput"> 34 </p>
  <p class="editOutput"> 46 </p>
  <p class="editOutput"> 50 </p>
  <p class="editOutput"> 62 </p>
  <p class="editOutput"> 73 </p>
</div>

<div>
<label for="totalValueField">TOTAL VALUE</label>
<p id="totalValueField" name ="totalValueField"> value </p>
</div>

<input type="checkbox" class="checkbox" value="10">
<label>+10 Monies</label>
<input type="checkbox" class="checkbox" value="30">
<label>+30 Monies</label>
<input type="checkbox" class="checkbox" value="50">
<label>+50 Monies</label>
<input type="checkbox" class="checkbox" value="20">
<label>+20 Monies</label>