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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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