jQuery数学和变数 [英] jQuery math & variables

查看:95
本文介绍了jQuery数学和变数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图获取一个变量(文本输入的值)并对其进行数学运算,然后将结果输出到另一个元素.

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆