jQuery数学和变数 [英] jQuery math & variables
问题描述
我试图获取一个变量(文本输入的值)并对其进行数学运算,然后将结果输出到另一个元素.
I'm trying to take a variable (the value of a text input) and do math to it, then output the result to another element.
我遇到了一些问题,即它不起作用.
I'm running into a few problems, namely that it doesn't work.
这是我的代码- http://slexy.org/view/s2TIOA5FKw .
推荐答案
$('#element_3').val()
在使用输入字段时,需要使用 .val
来检索其值
When you are working with input fields, you need to use .val
to retrieve their value.
编辑要明确,通过需要使用",我说它比现有代码var $months = $('#element_3')
更好.如果我描述必要性的方式不正确,我深表歉意.
EDIT To be clear, by "need to use" I'm saying it's better than the existing code, var $months = $('#element_3')
. My apologies if the way I portrayed necessity was inaccurate.
基于我可以拼凑的内容,这就是我想出的.我认为这就是您要寻找的.如果没有,我希望这至少是朝您的解决方案迈进的一步(并且可以帮助您了解jQuery的工作方式).如果您有任何疑问,请发表评论.我会尽力回答这些问题.
Based on what I could piece together, this is what I came up with. I think this is what you're looking for. If not, I hope it's at least a step towards your solution (and helps you understand how jQuery works). Please comment on the post if you have any questions and I'll do my best to answer them.
从此开始: http://www.jsfiddle.net/zzd3K/3 /(工作示例)
[注释版]
Start off with this: http://www.jsfiddle.net/zzd3K/3/ (Working Example)
[Commented Version]
两者都已注释并且可以正常工作,并修复了#element_1 .bind()(拼写错误,"kepress"->"keypress")
Both commented and working, with a fix to the #element_1 .bind() (spelling error, "kepress" -> "keypress")
HTML
<html>
<head>
...
<script type="text/javascript">
$(function(){
$('input[name=select]').change(function(){
$('#select').text($(this).val());
});
$('#element_1').bind('keydown keyup keypress', function(){
$('#advertiserNameDisplay').html($(this).val());
});
$('#element_2').bind('keydown keyup keypress', function(){
$('#adImageDisplay').text($(this).val());
});
$('#element_3').bind('keydown keyup keypress', calcPrice);
function calcPrice(){
var months = parseInt($('#element_3').val());
if (!isNaN(months)){
var rate = 1;
if (months >= 1 && months < 3){
rate = 199;
}else if (months >= 3 && months < 6){
rate = 175;
}else{
rate = 150;
}
var price = rate * months;
$('#rate').text(rate);
$('#months').text(months);
$('#total').text(price);
}else{
$('#months').text('-');
}
}
calcPrice();
});
</script>
...
</head>
<body>
...
<fieldset>
<legend>Configured Values</legend>
<table>
<tr>
<td>Ad:</td>
<td><input type="text" name="select" value="" /></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="Text" id="element_1" value="" /></td>
</tr>
<tr>
<td>Ad Image URL:</td>
<td><input type="text" id="element_2" value="" /></td>
</tr>
<tr>
<td>Months:</td>
<td><input type="text" id="element_3" value="12" /></td>
</tr>
</table>
</fieldset>
<br /><br />
<ul>
<li>Ad Selected: #<span id="select"></span></li>
<li>Your Name: <span id="advertiserNameDisplay"></span></li>
<li>Your Image URL: <span id="adImageDisplay"></span></li>
<li>Your total is $<span id="total"></span>.00 at a rate of $<span id="rate"></span>.00 per month for <span id="months"></span> months.</li>
</ul>
...
</body>
</html>
(不要介意字段集,我用它来模拟您的控件)
这篇关于jQuery数学和变数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!