Как добавить класс к элементу на основе ввода формы?

Question

Как добавить класс к элементу на основе ввода формы?

0

Как я могу добавить класс подсветки (указать, какой ценовой разрыв клиент имеет право) в элемент списка на основе введенного количества? по изменению?

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

KitInd 21 окт. 2013, в 22:47

Источник

0

onchange - хорошее место для начала .. Я предлагаю дать ему шанс, а затем дайте нам знать, что вы пытались и что пошло не так.
showdev 21 окт. 2013, в 20:33

Теги:

javascript

jquery

html

forms

1 ответ

Ещё вопросы

onchange - хорошее место для начала .. Я предлагаю дать ему шанс, а затем дайте нам знать, что вы пытались и что пошло не так.

Robbie Averill · Accepted Answer · 2013-10-21T19-25-00.000Z

Вам нужно добавить количество к 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');
});

Это прекрасно работает для меня, пока я загружаю фрагмент jquery после элемента ввода. Спасибо!