2

cash、credit_card、gift_certおよびの約 4 つの入力フィールドを含むフォームがありtotalます。cash, credit_card, gift_cert3 つのフィールド ( ) の合計が入力フィールド ( ) と等しくない場合、送信ボタンを非表示にしたいと思いますtotal。私はほとんどそこにいると思いますが、合計を減らそうとすると問題があり、うまくいきaddClassません。

ここにjsfiddleがあります。

HTML

<form>
    <input type="text" name="cash" value="0.00">
    <br />
    <input type="text" name="credit_card" value="0.00">
    <br />
    <input type="text" name="gift_cert" value="0.00">
    <br />
    <input type="text" name="total" value="100">
    <br />
    <input type="submit" name="submit" class="test" value="Save">
</form>

JS:

$(':input').bind('keypress keydown keyup change', function () {

    var total = parseFloat($(':input[name="total"]').val(), 10),
        cash = parseFloat($(':input[name="cash"]').val(), 10),
        credit_card = parseFloat($(':input[name="credit_card"]').val(), 10),
        gift_cert = parseFloat($(':input[name="gift_cert"]').val(), 10),
        payment = (cash + credit_card + gift_cert);

    if (payment >= total) {
        $(".test").removeClass("test");
    } else if (payment < total) {
        $(".test").addClass("test");
    }

});
4

5 に答える 5

4

使用showおよびhide： http： //jsfiddle.net/GFkSv/18/

$(':input').bind('keypress keydown keyup change',function(){

        var total = parseFloat($(':input[name="total"]').val(),10),
            cash = parseFloat($(':input[name="cash"]').val(),10),
            credit_card = parseFloat($(':input[name="credit_card"]').val(),10),
            gift_cert = parseFloat($(':input[name="gift_cert"]').val(),10),
            payment = (cash+credit_card+gift_cert);

        if(payment >= total){
            $('.test').show();
        }else if(payment<total){
            $('.test').hide();
        }       

});

編集

ページの読み込み後に事前に入力されたフィールドを考慮に入れて、 afetrの準備ができたkeypressイベントを起動するだけです：http： //jsfiddle.net/GFkSv/30/DOM

$(document).ready(function(){
    $(':input').trigger('keypress');
});
于 2013-01-18T15:12:48.690 に答える
1 
$('input').on('keyup change', function(){
        var total = parseFloat($('input[name="total"]').val()),
            cash = parseFloat($('input[name="cash"]').val()),
            credit_card = parseFloat($('input[name="credit_card"]').val()),
            gift_cert = parseFloat($('input[name="gift_cert"]').val()),
            payment = (cash+credit_card+gift_cert);

        $(".test").toggle(payment >= total);
});

フィドル

基数はparseFloatにon()は必要なく、よりも好まれbind()、最近の:inputはずでありinput、セレクターにとっては名前だけで十分であり、すべてのキープレスイベントに同時にバインドするのはオーバーヘッドです。

于 2013-01-18T15:15:37.973 に答える
1

「.test」クラスを削除したためです。次回は$（ "。test"）を再度クエリすることはできません。代わりに表示/非表示を使用してみてください

于 2013-01-18T15:15:56.667 に答える
0

またはセレクターを変更します：http： //jsfiddle.net/GFkSv/21/

$(':input').bind('keypress keydown keyup change',function(){

        var total = parseFloat($(':input[name="total"]').val(),10),
            cash = parseFloat($(':input[name="cash"]').val(),10),
            credit_card = parseFloat($(':input[name="credit_card"]').val(),10),
            gift_cert = parseFloat($(':input[name="gift_cert"]').val(),10),
            payment = (cash+credit_card+gift_cert);

        if(payment >= total){
        $("input[name=submit]").removeClass("test");    
        }else if(payment<total){
        $("input[name=submit]").addClass("test");
        }       

});
于 2013-01-18T15:15:21.793 に答える
0

もう 1 つの方法は、$.each(); を使用してすべてを要約することです。

$(':input').bind('keypress keydown keyup change', function () {
    var total = parseFloat($(':input[name="total"]').val(), 10);
    var payment=0;
    $(':input[name="cash"],:input[name="credit_card"],:input[name="gift_cert"]').each(
        function() {
            payment+=parseFloat($(this).val(),10);            
        }
    )
    console.log(payment,total);
    if (payment >= total) {
        $(".test").hide();
    } else if (payment < total) {
        $(".test").show();
    }

});
于 2013-01-18T15:22:10.577 に答える