JQuery цикл через строки рассчитывает процентную скидку от строковых значений

Question

В настоящее время я пытаюсь рассчитать процентное отклонение или разницу в процентах между двумя ценами в интернет-магазине.Мне также нужно иметь возможность циклически проходить по всем элементам на странице, к которым применено одинаковое имя класса.

Внутри div имени класса есть некоторый текст, содержащийся в пустом месте, который необходимо обрезать, чтобы вычислитьпроцент.Итак, мне нужно удалить текстовую часть строки, сохранить числа и выполнить математику.

Вывод HTML, с которым я работаю, выглядит следующим образом:

<div class="price-wrap">
   <div class="price regular-price">
      <span>Retail Price:</span>
      $549.00
   </div>
   <div class="price sale-price">
      <span>Our Price:</span>
      $489.00
   </div>
</div>

I 'm, используя следующий jQuery, чтобы изолировать значения цены (числовые) для цены продажи и обычной цены, используя «parseInt», чтобы избавиться от текста:

var regPrice = parseInt($('.regular-price').text().replace(/[^0-9.]/g, ""));
var salePrice = parseInt($('.sale-price').text().replace(/[^0-9.]/g, ""));

Это производит значения, которые я ожидаю.Здесь я сталкиваюсь с вопросом, как создать вычисление, используя эти переменные, которые будут проходить по всем классам ".regular-price" и ".sale-price" на странице и давать процентный результат.

Я пытался использовать функцию «каждый» для достижения моего результата:

$('.sale-price').each(function(index) {
    console.log( ((regPrice - salePrice) / (regPrice)) * 100%) );
 });

Но консоль пуста.

Я просто хотел бы иметь возможность рассчитать разницу в процентах междудва числа во время циклического перебора всех элементов и записи в консоль, пока я не решу, куда поместить значение.

Спасибо.

Answer 1

Существует вероятность того, что на странице имеется несколько элементов с одним и тем же классом.

Вам нужно будет найти ближайшего родителя, который охватывает как информацию о ценах, так и использовать this для нацеливания элемента в пределахконтейнер.

$('#button').on('click', () => {
    $('.price-wrap').each(function($elem) {
    debugger;
        let $regPrice = $('.regular-price', this);
        let $salePrice = $('.sale-price', this);
        
        let regPrice = getParsedPrice($regPrice);
        let salePrice = getParsedPrice($salePrice);
        
        let discount = ((regPrice - salePrice) / (regPrice)) * 100;
        
        discount = discount > 0 ? discount : 0;

        $('.discount', this).text(`$${discount.toFixed(2)}%`)
    });
});

function getParsedPrice($elem) {
  return parseInt($elem.text().replace(/[^0-9.]/g, ""), 10);
}

.price-wrap {
  margin-bottom: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price-wrap">
  <div class="price regular-price">
    <span>Retail Price:</span> $549.00
  </div>
  <div class="price sale-price">
    <span>Our Price:</span> $489.00
  </div>
  <div class="price">
    <span>Discount:</span><span class="discount"></span>
  </div>
</div>
<div class="price-wrap">
  <div class="price regular-price">
    <span>Retail Price:</span> $753.00
  </div>
  <div class="price sale-price">
    <span>Our Price:</span> $620.00
  </div>
  <div class="price">
    <span>Discount:</span><span class="discount"></span>
  </div>
</div>
<button id="button">Calculate Discount</button>

Answer 2

Я создал функцию, которая использует регулярное выражение для извлечения цены из элемента. Затем я сделал небольшой алгоритм, который рассчитывает процент скидки. Более того, я добавил возможность того, что цена выше, чем у конкурентов, чтобы вернуть скидку 0% вместо отрицательного значения.

function getPrice(elem){
  return elem.match(/\d+.\d{2}/);
}

function getDiscount(regPrice, salePrice){
  let disc = (regPrice - salePrice) * 100 / regPrice;
  return disc < 0 ? 0 : disc;
}

let $regPrice = $('.regular-price');
let $salePrice = $('.sale-price');

$regPrice.each(function(k, v){
  let regPrice = getPrice($regPrice[k].innerHTML);
  let salePrice = getPrice($salePrice[k].innerHTML);
  let discount = getDiscount(regPrice, salePrice);
  console.log(discount.toFixed(2) + '% of discount!');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price-wrap">
  <div class="price regular-price">
    <span>Retail Price:</span> $549.00
  </div>
  <div class="price sale-price">
    <span>Our Price:</span> $489.00
  </div>
</div>
<div class="price-wrap">
  <div class="price regular-price">
    <span>Retail Price:</span> $569.00
  </div>
  <div class="price sale-price">
    <span>Our Price:</span> $459.00
  </div>
</div>
<div class="price-wrap">
  <div class="price regular-price">
    <span>Retail Price:</span> $369.00
  </div>
  <div class="price sale-price">
    <span>Our Price:</span> $459.00
  </div>
</div>

Answer 3

Вам необходимо переместить объявления переменных в цикл, чтобы при наличии большого количества розничных и продажных цен переменные возвращались к текущим значениям. Вам также необходимо использовать index для получения соответствующей обычной цены.

Затем можно обернуть this в объект JQuery, если вы хотите текущую продажную цену, которую повторяет цикл.

Затем удалите % после 100 и добавьте еще ( в оператор console.log.

Я также настоятельно рекомендую вам поместить цены в их собственные элементы, например div, что значительно упростит извлечение чисел.

$('.sale-price').each(function(index) {
  var regPrice = parseInt($($('.regular-price')[index]).text().replace(/[^0-9.]/g, ""));
  var salePrice = parseInt($(this).text().replace(/[^0-9.]/g, ""));
  console.log(( ((regPrice - salePrice) / (regPrice)) * 100) );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price-wrap">
   <div class="price regular-price">
      <span>Retail Price:</span>
      $549.00
   </div>
   <div class="price sale-price">
      <span>Our Price:</span>
      $489.00
   </div>
</div>