0

最も近いテキストボックスの値を取得して変数に割り当てるにはどうすればよいですか？次に、値を取得した後、そのテキストボックスの現在の値に前のテキストボックスの値を掛けて変更します。同じ入力要素を持つdivのインスタンスが3つあるので、.closest（）または.next（）が役立つと思います。これが私のコードの抜粋です

HTML

<div class="box">
    <b>1</b>
    <input type="text" name="quantity" value="1"/>
    <input type="checkbox" name="ignoreThisCheckbox" checked="checked"/>
    <input type="text" name="price" value="10"/>
</div>

<div class="box">
    <b>2</b>
    <input type="text" name="quantity" value="1"/>
    <input type="checkbox" name="ignoreThisCheckbox" checked="checked"/>
    <input type="text" name="price" value="10"/>
</div>

<div class="box">
    <b>3</b>
    <input type="text" name="quantity" value="1"/>
    <input type="checkbox" name="ignoreThisCheckbox" checked="checked"/>
    <input type="text" name="price" value="10"/>
</div>

JS

$("input[name=quantity]").each(function(){
    $(this).bind("change keyup", function(){
        var q = $(this).val();
        var p = parseFloat($(this).closest("input[name=price]").val()).toFixed(2);
        var amount = q * p;
        $(this).closest("input[name=price]").val(amount)
        console.log(amount);
    })
})

動作しないデモ

http://jsfiddle.net/c6yfS/

回答ありがとうございます

/* ノート */

チェックボックスの目的は、関係する2つの要素の間にチェックボックスがあることを示すことだけです。

4

4 に答える 4

2

data正しく計算するには、属性を使用することをお勧めします。

HTML：

<div class="box">
    <b>1</b>
    <input type="text" name="quantity" value="1"/>
    <input type="checkbox" name="ignoreThisCheckbox" checked="checked"/>
    <input type="text" name="price" data-value="10"/>
</div>


JS：

$('input[name=quantity]').on("change keyup", function(){
        var q = 0;
        var p = 0;
        var amount = 0;
        q = parseInt($(this).val(), 10);
        p = parseInt($(this).siblings("input[name='price']").data('value'), 10);
        amount = q * p;
        if (amount) {
          $(this).siblings("input[name='price']").val(amount)
        console.log(amount);
        } else {
          $(this).siblings("input[name='price']").val('Please specify the quantity')        
        }
})

デモ

于 2012-06-22T01:27:24.707 に答える
2

他のポスターで言及されているように、DOMツリー（つまり親要素）を.closestで検索するときに.siblingsを使用できます。ただし、数量が変更された場合、取得する価格が単価あたり適切になることはないため、コードには論理エラーもあります。おそらくこれを容易にするために、別の単価の隠された値が必要になります

ここで更新されたコードをチェックしてください：http：//jsfiddle.net/c6yfS/1/

于 2012-06-22T01:36:46.923 に答える
1

.closestDOMツリーで最も近い要素を見つけるために使用されます。あなたが探しているのはsiblingsまたはnext| prev。

http://api.jquery.com/siblings/

http://api.jquery.com/prev/

http://api.jquery.com/next/

それで

$(this).siblings("input[name='price']").val(amount);

編集

これが完全に機能するJSです：

$("input[name=quantity]").each(function(){
    $(this).bind("change keyup", function(){
        var $thi,q,$p,p;
        $thi = $(this);
        q = $thi.val();
        $p = $(this).siblings("input[name='price']");
        p = parseFloat($p.val()).toFixed(2);
        $p.val(q * p);
    });
});
于 2012-06-22T01:23:49.393 に答える
0

わかりやすくするために、合計フィールドを追加しました。次のコードで解決できます。

$（ "input [name = amount]、input [name = price]"）.each（function（）{$（this）.on（{'keyup'：function（）{var j0 = $（this）.nextAll （"入力[名前=合計]"）; j0.val（j0.prevAll（ "入力[名前=数量]"）。val（）* j0.prevAll（ "入力[名前=価格]"）。val（） ）}}）}）;

動作する「フィドル」を表示するには、ここをクリックしてください

于 2012-06-22T02:41:19.787 に答える