Как выделить текста от значения инпута?

110

05 июля 2021, 22:40

подскажите как можно выделять цену жирным шрифтом или менять цвет текста в зависимости от введенного значения в 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>

Answer 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>