1

div でグループ化された複数の入力テキスト フィールドがあります。

<div class="container0">
<input class="containerItem0" name="containerItem[0][0]" id="containerItem_0_0" type="text">  
<input class="containerItem1" name="containerItem[0][1]" id="containerItem_0_1" type="text">
</div

<div class="container1">
<input class="containerItem0" name="containerItem[1][0]" id="containerItem_1_0" type="text">
<input class="containerItem1" name="containerItem[1][1]" id="containerItem_1_1" type="text">
</div>

<div class="container2">
<input class="containerItem0" name="containerItem[2][0]" id="containerItem_2_0" type="text">
<input class="containerItem1" name="containerItem[2][1]" id="containerItem_2_1" type="text">
</div>

このコードを説明しましょう
: 0、1、2 の 3 つのコンテナーがあります。ただし、これは可変です。多かれ少なかれある可能性があります。各コンテナーには、常に同じ数のアイテム (この場合は 2 つ) があります。これも変動する可能性がありますが、すべてのコンテナで常に同じ量になります。
同じクラスのアイテムは同じアイテムです！唯一の違いは、それらが異なるコンテナーに入っていることです。
各入力項目の名前と ID は、フォームの送信後に決定するために私の php スクリプトで使用されます。 

containerItem[1][0]
containerItem[ContainerNumber][Item]

私が達成したいこと:
各 containerItem には個別の最大量があります。
containerItem0 = 100、containerItem1 = 200、containerItem2 = 300 としましょう
。ここで、containerItem0 の入力フィールドに数値を入力すると、たとえば 20 です。この場合、入力フィールドの後ろにある可能性のある a を更新する必要があります。 80.
数値を入力した入力フィールドの後ろだけでなく、他のすべての containerItem0 の後ろも更新する必要があります。

私が試したこと

// php part
// Create variables for use in jquery for the max values for the containerItems
$jqueryVars="";
$j=0;
// containerItems is an array I get with the numberOrdered value which equals the maximum number allowed
foreach ($containerItems as $key => $value) {
    $jqueryVars .= "var maxContainerItem".$j." = ".$value['NumberOrdered'].";\n";
    $j++;
}


// jQuery part:
// Calculate left amount of container items.
'$(document).change(function() {
    '.$jqueryVars.'
    var sumOfValues = 0;
    //I USED >>.containerItem0<< in this case to see if it works, however this should be variable
    $(".containerItem0").each(function(){
       sumOfValues+=$(this).val();
    });
    alert(sumOfValues);
});

ご覧のとおり、私はこの全体を動的にすることに行き詰まっています。sumOfValues の警告メッセージが部分的に表示されます。なぜ部分的に？数字を追加するのではなく、文字列として追加します。
また、すべてのコンテナ クラスを繰り返し処理し、入力フィールドの変更をリッスンする方法もわかりません。

正しい方向へのポインタを得るのを楽しみにしています:)

4

1 に答える 1

1

$(this).val()フィールドの値を返すを使用していますinput。これらの値は確かに文字列であるため+、それらを使用すると連結されます。

値を追加する前に値を解析すると、期待どおりの値が得られるはずです。

$(document).change(function() {
  var sumOfValues = 0;
  $(".containerItem0").each(function() {
     sumOfValues += parseFloat($(this).val());
  });
  alert(sumOfValues);
});
于 2012-06-12T18:23:25.510 に答える