Как я могу добавить класс подсветки (указать, какой ценовой разрыв клиент имеет право) в элемент списка на основе введенного количества? по изменению?
<ul class="list-group">
<li class="list-group-item highlight">Less than 10 <span class="pull-right">$34.50</span></li>
<li class="list-group-item">10 to 40 <span class="pull-right">$34.50</span></li>
<li class="list-group-item">40+ <span class="pull-right">$34.50</span></li>
</ul>
<input type="text" placeholder="Quantity">
Вам нужно добавить количество к li
элементам каким - то образом (я предлагаю id="lt10"
, id="10-40"
и id="40plus"
, а затем создать некоторые правила в вашем ввода change
обратного вызова, чтобы определить, какой литий в изюминка.
Кроме того, укажите свой ввод id и/или имя.
-- html:
...
<input type="text" id="qty" placeholder="Quantity">
-- jquery:
$('#qty').change(function() {
var quantity = parseInt( $(this).val() );
// reset highlight classes for the elements
$('.list-group li').removeClass('highlight');
// apply new highlight classes
if( quantity < 10 )
$('li#lt10').addClass('highlight');
else if( quantity >= 10 && quantity <= 40 )
$('li#10-40').addClass('highlight');
else if( quantity > 40 )
$('li#40plus').addClass('highlight');
});
onchange
- хорошее место для начала .. Я предлагаю дать ему шанс, а затем дайте нам знать, что вы пытались и что пошло не так.