javascript - 如何根据表单输入向元素添加类？

Question

如何根据输入的数量将突出显示类（以指示客户有资格获得哪个价格区间）添加到列表项？改变？

    <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回调中创建一些规则以确定要突出显示的 li 。

另外，为您的输入提供一个 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');
});