jQuery вычислить поля ввода ввода умножить

Question

У меня вопрос о вычислении полей умножения формы при изменении события. Калакуляция для новых форм полей формы modila отлично работает. У меня есть каждое событие поля формы, если щелкнуть img-X, поле формы должно быть удалено, и все поля должны быть снова вычислены для нового результата после удаления этого поля. Проблема в моей таблице <tr></tr> insade, у меня есть текст с классом pdv, и это поле должно быть рассчитано с суммой двух значений kolicina * cijena, я имею в виду, что вычисление трех полей дает результат для вывода. Лучшее объяснение. Я приведу код ниже и подробно объясню.

HTML

<tbody> 
    <tr class="opa"> 
     <td>234</td> 
     <td>Penkala za ured</td> 
     <td> 
      <input type="text" class="form-control" placeholder=" Napomena"/> 
     </td> 
     <td>Komad</td> 
     <td> 
      <input type="text" class="form-control kolicina" placeholder=" Količina" /> 
     </td> 
     <td> 
      <input type="text" class="form-control cijena" placeholder=" Cjena"/> 
     </td> 
     <td> 
      <input type="text" class="form-control popust" placeholder=" Popust"/> 
     </td> 
     <td class="pdv">13%</td> 
     <td>10.00</td> 
     <td> 
      <img class="img-responsive remove_element" src="../images/forms/icon_delete.png"/> 
     </td> 
    </tr> 
    <tr class="opa"> 
     <td>1</td> 
     <td>Čokolada</td> 
     <td> 
      <input type="text" class="form-control" placeholder=" Napomena"/> 
     </td> 
     <td>Komad</td> 
     <td> 
      <input type="text" class="form-control kolicina" placeholder=" Količina"/> 
     </td> 
     <td> 
      <input type="text" class="form-control cijena" placeholder=" Cjena"/> 
     </td> 
     <td> 
      <input type="text" class="form-control popust" placeholder=" Popust"/> 
     </td> 
     <td class="pdv">25%</td> 
     <td>5.30</td> 
     <td> 
      <img class="img-responsive remove_element" src="../images/forms/icon_delete.png"/> 
     </td> 
    </tr> 
    <tr class="opa"> 
     <td>52</td> 
     <td>Pranje auta</td> 
     <td> 
      <input type="text" class="form-control" placeholder=" Napomena"/> 
     </td> 
     <td>Komad</td> 
     <td> 
      <input type="text" class="form-control kolicina" placeholder=" Količina"/> 
     </td> 
     <td> 
      <input type="text" class="form-control cijena" placeholder=" Cjena"/> 
     </td> 
     <td> 
      <input type="text" class="form-control popust" placeholder=" Popust"/> 
     </td> 
     <td class="pdv">25%</td> 
     <td>6.40</td> 
     <td> 
      <img class="img-responsive remove_element" src="../forms/icon_delete.png"/> 
     </td> 
    </tr> 
</tbody> 

Это моя таблица с результатами, вы можете увидеть класс kolicina - cijena - popust - pdv, то есть все для расчета полей формы. Вопрос заключается в том, как взять текущий текст из класса pdv и рассчитать с kolicina - cijena - popust, а затем после вычисления добавить к некоторому элементу в html.

В jQuery Я выполнил расчет полей kolicina - cijena - popust и добавьте их в HTML-элемент. Проблема в том, когда значение pdv text равно 25 или 13 или 5, расчет должен идти в отдельный элемент html.

HTML

<span><a class="sum">0 </a></span> 
<span><a class="popust_count">0 </a></span> 
<span><a class="popust_all">0 </a></span> 
<span><a class="sum">0 </a></span> 
<span>PDV 25%: <a class ="pdv_25">0 </a> | PDV 13%: <a class="pdv_13">0 </a> | PDV 5%: <a class="pdv_5">0 </a></span> 

И мой код JQuery выглядит следующим образом: Этот код работает.

$(".prod_go input").keyup(multInputs); 

        $(".remove_element").click(function() { 
         $(this).parent().parent().remove(); 
         multInputs(); 
        }); 

         function multInputs() { 
          var mult = 0; 
          var sa_popust_uk = 0; 

          var pdv_25 = 0; 
          var pdv_13 = 0; 
          var pdv_5 = 0; 
          // for each row: 
          $("tr.opa").each(function() { 
           // get the values from this row: 

           var $kolicina = $('.kolicina', this).val(); 
           var $cijena = $('.cijena', this).val(); 
           var $popust = $('.popust', this).val(); 

           var $total = ($kolicina * 1) * ($cijena * 1); 
           var $total_popus = ($kolicina * 1) * ($cijena * 1) * (($popust * 1)/100); 

           /*Porez*/ 



           var value1 =Number($(this).closest('tr.opa').find('td[class=pdv]').text().replace(/[%]/g, "")); 

           if (value1 === 25){ 

            var kaos = ($kolicina * 1) * ($cijena * 1) * (0.25 * 1); 
            pdv_25 +=kaos; 
           } 
           if (value1 === 13){ 

            var kaos = ($kolicina * 1) * ($cijena * 1) * (0.13 * 1); 
            pdv_13 +=kaos; 
           } 
           if (value1 === 5){ 

            var kaos = ($kolicina * 1) * ($cijena * 1) * (0.05 * 1); 
            pdv_5 +=kaos; 
           } 


           // set total for the row 
           //$('.sum').text($total); 
           mult += $total; 
           sa_popust_uk += $total_popus; 

          }); 
          $(".popust_all").text(mult-sa_popust_uk.toFixed(2)+' kn'); 
          $('.sum').text(mult.toFixed(2)+' kn'); 
          $('.popust_count').text(sa_popust_uk.toFixed(2)+' kn'); 

          /*Append PDV to page*/ 
          $('.pdv_25').text(pdv_25.toFixed(2)+' kn'); 
          $('.pdv_13').text(pdv_13.toFixed(2)+' kn'); 
          $('.pdv_5').text(pdv_5.toFixed(2)+' kn'); 

          $('.sum_od_all').text((mult+pdv_25+pdv_13+pdv_5).toFixed(2)+' kn'); 

          console.log('PDV 25:'+ pdv_25+' PDV 13:'+ pdv_13+' PDV 5:'+ pdv_5); 

          //$(".sum_od_all").text(mult); 
         } 


      }); 

Если вы можете взглянуть и дать мне совет по расчету этой формы.

Answer 1

я не до конца понял, (в первую очередь то, что вам нужно поместить внутри значений пролетных), так это то, что я получаю: JSFIDDLE DEMO

$(".prod_go").on('input','input',multInputs); 

function multInputs() { 
    var mult = 0; 
    var sa_popust_uk = 0; 

    $("tr.opa").each(function() { 
     var $kolicina = $('.kolicina', this).val(), 
      $cijena = $('.cijena', this).val(), 
      $popust = $('.popust', this).val(), 
      $total = ($kolicina * 1) * ($cijena * 1), 
      $total_popus = ($kolicina * 1) * ($cijena * 1) * (($popust * 1)/100); 

     //Forge the class name of the span: <td class="pdv">25%</td> becomes pdv_25 
     var $pdv_span = 'pdv_'+($('.pdv', this).text().replace('%','')).trim(); 
     console.log($pdv_span); 

     mult += $total; 
     sa_popust_uk += $total_popus; 
     //Append value to the relative span value 
     $('.'+$pdv_span).text(mult); 
    }); 
    $(".popust_all").text(mult - sa_popust_uk.toFixed(2) + ' kn'); 
    $('.sum').text(mult.toFixed(2) + ' kn'); 
    $('.popust_count').text(sa_popust_uk.toFixed(2) + ' kn'); 

} 

Где prod_go класс таблицы, также у меня есть переменная $(".prod_go input").keyup(multInputs); до $(".prod_go").on('input','input',multInputs); т.к. более надежно как событие.

Если вам нужно различать мультирежим то: JSFIDDLE

$(".prod_go").on('input', 'input', multInputs); 

function multInputs() { 
    var mult = 0, 
     mult5 = 0, 
     mult13 = 0, 
     mult25 = 0, 
     sa_popust_uk = 0; 

    $("tr.opa").each(function() { 
     var $kolicina = $('.kolicina', this).val(), 
      $cijena = $('.cijena', this).val(), 
      $popust = $('.popust', this).val(), 
      $total = ($kolicina * 1) * ($cijena * 1), 
      $total_popus = ($kolicina * 1) * ($cijena * 1) * (($popust * 1)/100); 

     //Forge the class name of the span: <td class="pdv">25%</td> becomes pdv_25 
     var $pdv_span = ($('.pdv', this).text().replace('%', '')).trim(); 
     console.log($pdv_span); 
     switch ($pdv_span) { 
      case '5': 
       mult5 += $total; 
       $('.pdv_' + $pdv_span).text(mult5); 
       break; 
      case '13': 
       mult13 += $total; 
       $('.pdv_' + $pdv_span).text(mult13); 
       break; 
      case '25': 
       mult25 += $total; 
       $('.pdv_' + $pdv_span).text(mult25); 
       break; 
      default: 
       break; 
     } 
     sa_popust_uk += $total_popus; 
    }); 
    mult = mult5 + mult13 + mult25; 
    $(".popust_all").text(mult - sa_popust_uk.toFixed(2) + ' kn'); 
    $('.sum').text(mult.toFixed(2) + ' kn'); 
    $('.popust_count').text(sa_popust_uk.toFixed(2) + ' kn'); 

}