jQuery-獲取最接近的文本框的值並將其分配給變量

Question

如何獲取最接近的文本框的值並將其分配給變量？ 然后，在獲取值之后，通過將其乘以先前文本框的值來更改該文本框的當前值。 我有三個具有相同輸入元素的div實例，所以我認為.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/

謝謝你的回應

/* 注意 */

該復選框的目的只是為了表明我在有關的兩個元素之間有一個復選框。

Answer 1

最好使用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')        
        }
})

DEMO

Answer 2

如其他發布者所述，您可以將.siblings用作.closest在DOM樹（即父元素）中向上搜索。 但是，代碼中也存在邏輯錯誤，因為如果更改數量，則取回的價格永遠不會是正確的每單位價格。 您可能需要單獨的單價隱藏值以方便實現此目的

在此處查看更新的代碼： http : //jsfiddle.net/c6yfS/1/

Answer 3

.closest用於在DOM樹上查找最接近的元素。 您正在尋找的是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);
    });
});

Answer 4

為了清楚起見，我只添加了一個總計字段，您可以使用以下代碼解決此問題：

$（“ input [name = quantity]，input [name = price]”）.each（function（）{$（this）.on（{'keyup'：function（）{var j0 = $（this）.nextAll （“ input [name = total]”）; j0.val（j0.prevAll（“ input [name = quantity]”）。val（）* j0.prevAll（“ input [name = price]”）。val（） ）}}）}）;

單擊此處查看正在運行的“小提琴”