0

これは非常に単純なはずですが、私はこれに行き詰まりました...数量の入力フィールドとその横に価格の列がある製品のリストがあります。価格は2つの値を表示しています。それらの1つは隠されています。入力フィールドの値が特定の値を超える場合、他の価格を非表示にする必要があります。例:(入力：[]、show price1price2）

input: [2], show <span class=one>price1</span>
input: [5], show <span class=one>price1</span>
input: [8], show <span class=two>price2</span>
input: [9], show <span class=two>price2</span>

これまでの私のコード（たとえば、2つの製品しか表示していないため）：

<form name="formname" action="formaction" method="post">
prod 1<input type="text" value="" class="class1" size="3"><span class="one">$1.00</span><span class="two">$2.00</span>
prod 2<input type="text" value="" class="class1" size="3"><span class="one">$4.00</span><span class="two">$6.00</span>
</form>

そして、スクリプトタグの下部にあります：

$(document).ready(function() {
    if($('input.class1').val() > 5) {
       $('.one').show();
       $('.two').hide();
    }
});

私は何が欠けていますか？フォーム名はおそらく？これは最初の部分です...

私の他の質問は..すべての入力フィールド（クラスとしてclass1を含む）の合計が5を超える場合、同じことを行うようにするにはどうすればよいですか。（したがって、個々のフィールドではなく、入力フィールドの合計に依存するようになりました）

4

2 に答える 2

1 
var inputs = $('input[class^=class]');  // get inputs which class name 
                                        // start with "class" eg: class1, class2..

// fire blur event
// you may use keyup or something else

inputs.on('blur', function(e) {
    var val = 0;

    // adding all inputs value
    // of all inputs with class = blured input class

    $('input.' + this.className).each(function() {
      val += parseInt( this.value, 10);        
    });

    // checking for condition
    if (val > 5) {
       $(this).next('.one').show().next('.two').hide();
    } else {
       $(this).next('.one').hide().next('.two').show();
    }
});

ぼかしのあるデモ

キーアップによるデモ

ノート

すべての jQuery コードを 内に配置します$(document).ready()。

コメントによると

このアップデートを見る

コード

if (val > 5) {
   $('.one').show();
   $('.two').hide();
} else {
   $('.one').hide();
   $('.two').show();
}

最後のコメントの後に更新

変えるだけ

val += parseInt( this.value, 10);

に

val += parseInt( this.value || 0, 10); // default 0, if no value given

コメントによると

上記のコードを選択ボックスに実装するにはどうすればよいですか? 

var selects = $('select[class^=class]');  // get selects which class name
                            // start with "class" eg: class1, class2..

// fire change event

selects.on('change', function(e) {
    var val = 0;

    // adding all selects value

    $('select.' + this.className).each(function() {
      val += parseInt( this.value, 10);        
    });

    // checking for condition
    if (val > 5) {
       $(this).next('.one').show().next('.two').hide();
    } else {
       $(this).next('.one').hide().next('.two').show();
    }
});
于 2012-09-11T18:23:00.807 に答える
0

ページの読み込み時にこれを呼び出しています。入力フィールドの値が変更されるたびに実行する必要があります。

これで if ブロックをラップすることを検討してください。

$('input.class1').blur(function() {
  if($('input.class1').val() > 5) {
     $('.one').show();
     $('.two').hide();
  }
});

またはその趣旨で、使用を検討して$.on()ください。

それらを合計したい場合は、各入力に共通のクラスを割り当て、次を使用します$.each()。

$('.common-class').each(function() {
  sum = sum + $(this).val()
});

お役に立てれば。

于 2012-09-11T18:06:19.793 に答える