[英]jQuery - Get the value of closest textbox and assign it into a variable
How can I get the value of the closest textbox and assign it into a variable? 如何获取最接近的文本框的值并将其分配给变量? Then after getting the value, change the current value of that textbox by multiplying it by the value of previous textbox.
然后,在获取值之后,通过将其乘以先前文本框的值来更改该文本框的当前值。 I have three instances of divs with the same input elements so I think .closest() or .next() can help me.
我有三个具有相同输入元素的div实例,所以我认为.closest()或.next()可以帮助我。 Here is a snippet of my code
这是我的代码片段
HTML 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 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);
})
})
non working demo 无效的演示
http://jsfiddle.net/c6yfS/ http://jsfiddle.net/c6yfS/
Thank you for responses 谢谢你的回应
/* NOTE */ /* 注意 */
The purpose of the checkbox is just to show that I have a checkbox in between the two elements concerned. 该复选框的目的只是为了表明我在有关的两个元素之间有一个复选框。
it's better to use data
attribute in order to calculating correctly: 最好使用
data
属性以正确计算:
HTML: 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: 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')
}
})
As mentioned by other posters, you can use .siblings as .closest searches up the DOM tree (ie parent elements). 如其他发布者所述,您可以将.siblings用作.closest在DOM树(即父元素)中向上搜索。 However there is also a logic error in your code as the price you retrieve is never the right per unit price if quantity is changed.
但是,代码中也存在逻辑错误,因为如果更改数量,则取回的价格永远不会是正确的每单位价格。 You will need a separate unit price hidden value perhaps to facilitate this
您可能需要单独的单价隐藏值以方便实现此目的
Check out the updated code here: http://jsfiddle.net/c6yfS/1/ 在此处查看更新的代码: http : //jsfiddle.net/c6yfS/1/
.closest
is used to find the closest element up the DOM tree. .closest
用于在DOM树上查找最接近的元素。 What you are looking for is siblings
or next
| 您正在寻找的是
siblings
还是next
| prev
. prev
http://api.jquery.com/siblings/ http://api.jquery.com/siblings/
http://api.jquery.com/prev/ http://api.jquery.com/prev/
http://api.jquery.com/next/ http://api.jquery.com/next/
So 所以
$(this).siblings("input[name='price']").val(amount);
Edit 编辑
Here is the full working JS: 这是完整的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);
});
});
for clarity I've just add a total field You can solve it with this code : 为了清楚起见,我只添加了一个总计字段,您可以使用以下代码解决此问题:
$("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() ) } } ) } ); $(“ 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() )}})});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.