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

为了清楚起见，我只添加一个总字段您可以使用以下代码解决此问题：

$（“输入[名称=数量]，输入[名称=价格]”） .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（））}}）}）;

Click here to see the working "Fiddle"

jQuery - 获取最接近的文本框的值并将其分配给变量

4 个答案: