0

如何获取最近的文本框的值并将其分配给变量？然后在获取值后，通过将其乘以前一个文本框的值来更改该文本框的当前值。我有三个具有相同输入元素的 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/

感谢您的回复

/* 笔记 */

复选框的目的只是表明我在相关的两个元素之间有一个复选框。

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

正如其他海报所提到的，您可以使用 .siblings 作为 .closest 搜索 DOM 树（即父元素）。但是，您的代码中也存在逻辑错误，因为如果数量发生变化，您检索的价格永远不会是正确的单价。您可能需要一个单独的单价隐藏值来促进这一点

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

于 2012-06-22T01:36:46.923 回答
1

.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);
    });
});
于 2012-06-22T01:23:49.393 回答
0

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

$("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() ) } } ) } );

单击此处查看工作中的“小提琴”

于 2012-06-22T02:41:19.787 回答