0

подскажите как можно выделять цену жирным шрифтом или менять цвет текста в зависимости от введенного значения в input. У меня есть цены: основная и скидочные. При количестве до 5 основная цена, после 5 скидочная, например после 10 другая скидочная. Когда введенное значение попадает в диапазон от 5 до 9 подсвечивается одна цена, от 10 и выше другая. Надеюсь расписал подробно и получится помочь.Заранее спасибо. Проблема в том что не понимаю как подсвечивать текст от введенного значения. Вот код и разметка с помощью которого я пытался это сделать:

$(document).ready(function() {
  var QuantityInput = 0;
  var PriceCard = document.getElementsByClassName("price-cart");
  var Quantity = document.getElementById("category");
  var DiscountQuantity = document.getElementsByClassName("discount-quantity");
 
  function СompareQuantity(value) {
    for (var i = 0; i < DiscountQuantity.length; i++) {
      if (value >= parseInt(DiscountQuantity[i].value)) {
        PriceCard[0].style.color = "";
        DiscountQuantity[i].parentNode.firstElementChild.style.color =
          "#0686cd";
      } else if (value < parseInt(DiscountQuantity[i].value)) {
        DiscountQuantity[i].parentNode.firstElementChild.style.color = "";
        PriceCard[0].style.color = "#0686cd";
      }
    }
  }
 
  Quantity.addEventListener("input", function(event) {
    QuantityInput = event.target.value;
    СompareQuantity(parseInt(QuantityInput));
  });
});
<ul class="list-unstyled">
    <li>
        <h2 class="price-cart" style="color: rgb(6, 134, 205);">1 300.00 руб</h2>
    </li>                   
    <li>
        <h2 class="discount-price" > 1 200.00 руб </h2>
        <input type="hidden" class="discount-quantity" value="5">
    </li>
    <li>
        <h2 class="discount-price"> 1 000.00 руб </h2>
        <input type="hidden" class="discount-quantity" value="10">
    </li>            
</ul>

1 ответ 1

1

Можно использовать data-атрибуты и указывать необходимое кол-во там. Записал сразу для классов, на случай если такой элемент не один.

document.addEventListener('DOMContentLoaded', function() {

  var category = document.querySelectorAll('.category');
  var list = document.querySelectorAll('.list-unstyled');
  for (var i = 0; i < category.length; i++) {
    updateDiscount(i);
  }

  function updateDiscount(i) {
    category[i].addEventListener('input', function() {
      var price = list[i].querySelectorAll('.price');
      var val = parseFloat(this.value);
      var color = true;
      for (var j = price.length - 1; j >= 0; j--) {
        price[j].classList.remove('light-blue');
        if (color && price[j].dataset.discountQty <= val) {
          price[j].classList.add('light-blue');
          color = false;
        }
      }
    });
  }
});
.light-blue {
  color: #0686cd;
}
<input class="category">
<ul class="list-unstyled">
  <li>
    <h2 class="price price-cart" data-discount-qty="1">1 300.00 руб</h2>
  </li>
  <li>
    <h2 class="price discount-price" data-discount-qty="5">1 200.00 руб</h2>
  </li>
  <li>
    <h2 class="price discount-price" data-discount-qty="10">1 000.00 руб</h2>
  </li>
</ul>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.