计算和替换跨度内的值

Question

我有一个网站，我显示的天数，产品是存储和一个百分比的总收费是根据天数。data-ref保存要收费的百分比值。

​

var thistotal = $("#total").text();

var percent1 = $("#date-1").attr("data-ref");
var delrate1 = $("#date-rate-1").text();
var replace1_total = thistotal.replace("€", "").replace(",", ".").replace("+", "");
var percentVal = (percent1 / 100) * replace1_total;
$('#date-1').html(percentVal);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="radio">
  <label class="img2" style="">
    <span>
      <h3>Day</h3>
      1<br>
      <p>
        <span class="thedate" id="date-1" data-ref="20.00000000">$18.00</span>
        <span id="date-rate-1">+ $10.00</span>
      </p>
    </span>
  </label>
</li>
<ul class="thelist">
  <li class="radio">
    <label class="img2" style="">
      <span>
        <h3>Day</h3>
        3
        <br>
        <p>
          <span class="thedate" id="date-3" data-ref="25.00000000"></span>
          <span id="date-rate-3">+ $10.00</span>
        </p>
      </span>
    </label>
  </li>
  <li class="radio">
    <label class="img2" style="">
      <span>
        <h3>Day</h3>
        5<br>
        <p>
          <span class="thedate" id="date-5" data-ref="30.00000000"></span>
          <span id="date-rate-5">+ $10.00</span>
        </p>
      </span>
    </label>
  </li>
</ul>
<div id="total">$100.00</div>

​

要显示按日收取的金额，我从span的data-ref属性中获取百分比值，从总数中计算百分比，并将其添加到该span的内容中。

我将单独添加每个id (“日期-1”、“日期-2”等)对跨度进行计算，并将其工作良好。但问题是，有许多新的选择，一些选项没有添加到某些产品。因此，我必须复制代码来进行每次计算(I上的数字是实际的日值。添加它们以使ids惟一)。

在不重复代码的情况下，实现这一百分比计算的最佳方法是什么？

Answer 1

如果我正确理解了您的问题，那么您可以使用类选择器，如下所示：

$('.thedate').each((index, item)=>{
  const dateRef = +($(item).attr("data-ref"))
  const dateRate = +($(item).next().html().replace("€", "").replace("$", "").replace(",", ".").replace("+", "").replace(" ", ""))
  $(item).parent().html((dateRef / 100) * dateRate)
})

Answer 2

看来这是预定的过程：

从<div id="total">

• get的内容中
• 获得total，从span的data-ref attribute
• update span的内容中获得percent，使用计算(百分比，总计)

下面将为使用class="thedate"的所有范围产生预期的结果

​

function setTheDatePrices(total) {

  // get all spans with 'class="thedate"'
  let theDates = Array.from(document.getElementsByClassName('thedate'));

  // set the contents of each "thedate" span
  theDates.forEach(theDate => {
    let percent = Number(theDate.dataset.ref);
    theDate.innerHTML = '$' + (percent / 100 * total).toFixed(2);
  });
}

let run = () => {};

window.onload = () => {

  // obtain total from contents of  `<div id="total">`
  const total = Number(
    document.getElementById('total')
    .innerHTML.match(/[-+]?[0-9]*\.?[0-9]+/)
  );
  
  run = () => setTheDatePrices(total);

}

<button onclick="run();">Set "thedate" Prices</button><br/>
<li class="radio">
  <label class="img2" style="">
    <span>
      <h3>Day</h3>
      1<br>
      <p>
        <span class="thedate" id="date-1" data-ref="20.00000000"></span>
        <span id="date-rate-1">+ $10.00</span>
      </p>
    </span>
  </label>
</li>
<ul class="thelist">
  <li class="radio">
    <label class="img2" style="">
      <span>
        <h3>Day</h3>
        3
        <br>
        <p>
          <span class="thedate" id="date-3" data-ref="25.00000000"></span>
          <span id="date-rate-3">+ $10.00</span>
        </p>
      </span>
    </label>
  </li>
  <li class="radio">
    <label class="img2" style="">
      <span>
        <h3>Day</h3>
        5<br>
        <p>
          <span class="thedate" id="date-5" data-ref="30.00000000"></span>
          <span id="date-rate-5">+ $10.00</span>
        </p>
      </span>
    </label>
  </li>
</ul>
<div id="total">$100.00</div>

​