如何基於表單輸入添加類到元素？

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'); 
});