javascript - 使用Jquery百分比并写入多个div

Question

我正在学习 JS，我有一个关于具体情况的问题。我正在尝试计算 % 并使用 JS 写入 div #porc 。我的问题是如何使这个功能更好以及如何使用同一类的多个 div。

HTML

<div class="wrapper">
  <div class="precoCheio">400,00</div>
  <div class="precoDesc">150,00</div>
  <div id="porc"></div>
</div>
<div class="wrapper">
  <div class="precoCheio">200,00</div>
  <div class="precoDesc">150,00</div>
  <div id="porc"></div>
</div>
<div class="wrapper">
  <div class="precoCheio">1000,00</div>
  <div class="precoDesc">600,00</div>
  <div id="porc"></div>
</div>

JS

function calculaPorcentagem(){
     var precoCheio = $(".wrapper .precoCheio").text();
     var precoDesc = $(".precoDesc").text();

     precoCheio    = precoCheio.replace(".", "");
     precoCheio    = precoCheio.replace(",", ".");
     precoDesc    = precoDesc.replace(".", "");
     precoDesc    = precoDesc.replace(",", ".");
     precoDesc    = precoDesc.replace(".", "");
     precoDesc    = precoDesc.replace(",", ".");


     var porcentagem = precoDesc * 100 / precoCheio / 100;
     var porcentagem = porcentagem.toFixed(0) - 100;

     $('#porc').html(porcentagem + ' % OFF ');

      var val = $("#porc").html();
      $("#porc").html(val.substring(1, val.length));
};

Answer 1

试试这个:

// run on document ready
$(function() {
  // cycle through each wrapper
  $('.wrapper').each(function() {
    var wrapper = $(this), // get current wrapper
        cheio = wrapper.children('.precoCheio'), // get child 'precoCheio' of current wrapper
        cheioVal = parseFloat(cheio.text().replace(/\./g, "").replace(",", ".")), // replace ALL dots then change first comma to dot
        desc = wrapper.children('.precoDesc'),  // get child 'precoDesc' of current wrapper
        descVal = parseFloat(desc.text().replace(/\./g, "").replace(",", ".")),
        porc = wrapper.children('.porc'); // get child 'porc' of current wrapper
  
    
    // do your calculation
    var porcentagem = 100 - ((descVal / cheioVal) * 100);

    // put result into current porc
    porc.html(porcentagem + ' % OFF');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="precoCheio">400,00</div>
  <div class="precoDesc">150,00</div>
  <div class="porc"></div>
</div><br />
<div class="wrapper">
  <div class="precoCheio">200,00</div>
  <div class="precoDesc">150,00</div>
  <div class="porc"></div>
</div><br />
<div class="wrapper">
  <div class="precoCheio">1000,00</div>
  <div class="precoDesc">600,00</div>
  <div class="porc"></div>
</div>