如何基于表单输入添加类到元素？

Question

如何根据输入的数量将高亮级别（指示客户符合哪种价格中断条件）添加到列表项目中？的onchange？

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

Answer 1

您需要的数量添加到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'); 
});