2 
    <ul class="liste_couleur_qty">
             <li style="margin-bottom: 20px;">
                    <dl>
                            <table width="200" border="0">
                          <tbody><tr>
                            <td width="50%">
                            <span style="display: block; font-size: 13px; line-height: 16px; margin-bottom: 2px;margin-right: 0px;margin-left: 20px;">Noir</span>
                        </td>

                            <td width="50%"><div class="add-to-cart">

                              <label for="qty-2195">qty :</label>

                              <input type="text" class="input-text qty calcul_qty_product" title="Qté" value="0" autocomplete="off" maxlength="5" data-product_color="127" id="qty-2195" name="qty-2195" onblur="addToCartPlus(2195, 127, this);">

                            </div></td>
                          </tr>
                        </tbody></table>
                        </dl>
                </li>

                <li style="margin-bottom: 20px;">
                    <dl>
                            <table width="200" border="0">
                          <tbody><tr>
                            <td width="50%">
                            <span style="display: block; font-size: 13px; line-height: 16px; margin-bottom: 2px;margin-right: 0px;margin-left: 20px;">Blanc</span>
                        </td>

                            <td width="50%"><div class="add-to-cart">

                              <label for="qty-2196">qty :</label>

                              <input type="text" class="input-text qty calcul_qty_product" title="Qté" value="0" autocomplete="off" maxlength="5"  id="qty-2196" name="qty-2196" onblur="addToCartPlus();">

                            </div></td>
                          </tr>
                        </tbody></table>
                        </dl>
                </li>
    <li style="margin-bottom: 20px;">
                    <dl>
                            <table width="200" border="0">
                          <tbody><tr>
                            <td width="50%">
                            <span style="display: block; font-size: 13px; line-height: 16px; margin-bottom: 2px;margin-right: 0px;margin-left: 20px;">Blanc</span>
                        </td>

                            <td width="50%"><div class="add-to-cart">

                              <label for="qty-2196">qty :</label>

                              <input type="text" class="input-text qty calcul_qty_product" title="Qté" value="0" autocomplete="off" maxlength="5"  id="qty-2196" name="qty-2196" onblur="addToCartPlus();">

                            </div></td>
                          </tr>
                        </tbody></table>
                        </dl>
                </li>

                    </ul> 
<div id="qtyvalue"><div>

私はやってみたいです：

入力値が変更されたときにdiv（qtyvalue）の内容を動的に変更しますか？入力テキスト値がさらにある場合は、それらを合計して、div（qtyvalue）に数値を表示します。私は次のコードを使用しています。

input.onkeyup = function() {
var result = 0;
$('.liste_couleur_qty li input').each(function(){
     result += parseInt(this.value, 10);
});
    document.getElementById('qtyvalue').innerHTML = result.value;    
}

しかし、コードが機能しません。入力テキストボックスが2つ以上ある場合、入力をループする方法がわかりません。ありがとうございました。

4

2 に答える 2

1

あなたが欲しいのはこれです：

$(document).ready(function() { //wrap in a document.ready event handler
    $('input').on('keyup', function() { //bind using jQuery
        var result = 0;
        $('.liste_couleur_qty li input').each(function() {
            result += parseInt(this.value, 10);
        });
        $('div#qtyvalue').text(result); //result.value doesn't exist, use result.
    });
});​

ここにデモがあります：http://jsfiddle.net/jeRdA/

更新:

ユーザーがいずれかの入力の値を''(たとえば、空白または空) または数値以外の値に変更できるようにするには、次の行を変更します。

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

に：

result += parseFloat(this.value, 10) || 0;

更新されたフィドル: http://jsfiddle.net/jeRdA/3/

于 2012-11-21T04:13:07.137 に答える
1

これを試して：

var $inputs = $('.liste_couleur_qty li input');
$inputs.keyup(function() {
   var result = 0;
   $inputs.each(function(){
     result += parseInt(this.value, 10);
   });
   $('#qtyvalue').html(result);    
});

これは、問題の要素の後のドキュメント対応ハンドラーまたはスクリプト ブロックにある必要があります (多くの人はスクリプトを本文の最後に置きます)。

あなたのコードでinput.onkeyup = ...は、変数がないためinput(すべての入力要素を自動的に取得しないため)、機能しません。またsomeElement.onkeyup =、一度に 1 つの要素にしかハンドラーをアタッチできません。代わりに jQuery を使用してキーアップ ハンドラーをバインドします。また、最後に合計を使用するには、 を使用するだけresultですresult.value。

于 2012-11-21T04:14:26.097 に答える