从同一个类中获取每个值，进行计算，然后将其附加到jQuery

debugcn 发表于 Dev

巴里斯·塞利克（Baris Celik）

我想从每个值中获取值.discountPrice span，将它们转换为数字，进行计算并将它们附加到.pSale标签中。我认为我需要使用“ this”关键字，但是我无法以某种方式将其集成到我的代码中...

这是我的代码：

$(document).ready(function() {
  var sPrice = $(".productItem .productDetail .productPrice .discountPrice span").text();
  var sPrice = sPrice.replace("$", "");
  var sPrice = parseFloat((sPrice) * 0.7).toFixed(2);
  $(".pSale").html(sPrice);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="productItem">
  <div class="productDetail">
    <div class="productPrice">
      <div class="discountPrice">
        <span>$25</span>
      </div>
    </div>
  </div>
  <div class="productIcon">
    <div class="salePrice">
      <span class="pSale">
                // This should be 25 * 0.7 = 17.50 //
            </span>
    </div>
  </div>
</div>
<div class="productItem">
  <div class="productDetail">
    <div class="productPrice">
      <div class="discountPrice">
        <span>$35</span>
      </div>
    </div>
  </div>
  <div class="productIcon">
    <div class="salePrice">
      <span class="pSale">
                // This should be 35 * 0.7 = 24.50 //
            </span>
    </div>
  </div>
</div>

罗里·麦克罗森（Rory McCrossan）

当前方法的问题在于，您正在同时处理所有discountPrice和.pSale元素。要解决此问题，您需要创建一个循环并分别对每个循环执行计算。

一种实现方法是遍历.pSale元素并根据从相关.discoutPrice元素计算出的值来设置其文本，如下所示：

jQuery($ => {
  $('.pSale').text(function() {
    return (($(this).closest('.productItem').find('.discountPrice').text().replace('$', '') || 0) * 0.7).toFixed(2);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="productItem">
  <div class="productDetail">
    <div class="productPrice">
      <div class="discountPrice">
        <span>$25</span>
      </div>
    </div>
  </div>
  <div class="productIcon">
    <div class="salePrice">
      <span class="pSale">
        // This should be 25 * 0.7 = 17.50 //
      </span>
    </div>
  </div>
</div>
<div class="productItem">
  <div class="productDetail">
    <div class="productPrice">
      <div class="discountPrice">
        <span>$35</span>
      </div>
    </div>
  </div>
  <div class="productIcon">
    <div class="salePrice">
      <span class="pSale">
        // This should be 35 * 0.7 = 24.50 //
      </span>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。