javascript - 计算所有输入的总和

Question

我正在尝试计算所有输入的总和。在计算之前，所有输入都被隐藏。假设有 30 个输入，并且它们是由访问者随机显示的。

我唯一能做的就是识别显示的输入，没有类“.hidden”。但是，当单击“总计”时，其输入应显示仅显示的输入的总和。val()

我相信，应该用循环来完成，但不知道。

请帮助我实现这一目标!

let productsObj = $('.order__row');

$('.count__total').on('click', function (e) {
    e.preventDefault();

    for (let i = 0; i < productsObj.length; i++) {
      const element = productsObj[i];
      if (!$(element).hasClass('hidden')) {
// calculate the total sum
      } else {
      
      }
    }
  });
  

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" order__row order__row-fish hidden">
  <div class="order__wrapper">            
    <input class="order__title" type="text" value="Fish" readonly>
  </div>
  <div class="order__wrapper">            
    <input class="order__price" type="number" value="500" readonly>
  </div>  
  <div class="order__wrapper">            
    <input class="order__qnt" type="number" value="1" >
  </div>
</div>

<div class=" order__row order__row-meat hidden">
  <div class="order__wrapper">            
    <input class="order__title" type="text" value="meat" readonly>
  </div>
  <div class="order__wrapper">            
    <input class="order__price" type="number" value="500" readonly>
  </div>  
  <div class="order__wrapper">            
    <input class="order__qnt" type="number" value="1" >
  </div>
</div>

<a class="count__total" href="#">Count total</a>
                  <input class="total__price" type="text" name="Total" readonly>

Answer 1

But when "count total" is clicked its input should display the sum of only revealed inputs.val()

仅直接获取非隐藏输入

$('.count__total').each('click', function (e) {
    e.preventDefault();
    var total = 0;
    $('.order__row:not(.hidden)').each( function(){
      total += +$(this).find( ".order__qnt" ).val(); //use .order__price if price has to be total'ed
    });
    console.log( total );
});