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

1 に答える 1

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');
});
于 2013-10-21T20:39:50.573 に答える