【问题标题】:Price Calculator Javascript help - sharing a variable's value价格计算器 Javascript 帮助 - 共享变量的值
【发布时间】:2012-05-24 23:27:45
【问题描述】:

我正在使用 CodeCanyon 的价格计算器,但遇到了一些 Javascript 问题。

第一个字段根据学分计算学费金额。

第二个字段(我遇到问题的地方)应该取从第一个字段中选择的学时数,除以 3 得到课程数量,然后乘以 100 得到数量教科书所需的钱。

我尝试使用 Javascript 和一些 ASP 来实现这个等式,但没有成功。我不是 Javascript 专家,但这里是目前的代码。非常感谢任何帮助!

HTML 标记

“f_4”和“f_7-textbooks”是在下面的脚本中命名的变量。 f_4 是选择的学时数。 在 f_7-textbook 中,我尝试调用 f_4 的值,将其除以 3 并乘以从数据库发送的值(因此,),设置为“100”。

<fieldset>
<p>1 class = 3 credit hours.</p>
<p>
    <label>Number of Credit Hours: <input class="spinner" type="text" id="f_4" name="f_4" data-spinner='{"min": 0, "max": 42, "step": 3}' data-default="0" value="3" data-cost="<%=FormatNumber(budgetRS("budget_Tuition_sem1"), 2)%>"/></label> 
    <span class="staticPrice">
    </span>
</p>
<p>
    Textbook Estimate ($<%=budgetRS("budget_BooksandSupplies_sem1")%>/3 credit hours): 
    <input type="hidden" name="f_7-textbooks" value="{f_4}/3*<%=budgetRS("budget_BooksandSupplies_sem1")%>" />
</p>
</fieldset>

Javascript

<script type="text/javascript">
$(function(){
    var form = $('#jquery-order-form');

    //form.find('span.staticPrice').remove();
    form.find('option').each(function(i){
        var opt = $(this)
        opt.text(opt.val());
    });

    var items = [];
    items['f_4'] = 'Credit Hours ($<%=budgetRS("budget_Tuition_sem1")%>/credit hour)';
    items['f_7-textbooks'] = 'Textbook Estimate ($<%=budgetRS("budget_BooksAndSupplies_sem1")%>/credit hour)';

    });

});
</script>

此计算器的完整代码可在http://media.briercrest.ca/calculators/collegecalculator.asp获得

【问题讨论】:

    标签: javascript jquery asp-classic calculator


    【解决方案1】:

    您正试图在您的服务器端代码中使用客户端值,该代码无法访问此数据并导致输出。

    <input type="hidden" name="f_7-textbooks" value="{f_4}/3*100">
    

    您应该在客户端代码中只使用客户端值,反之亦然。

    下面的代码应该得到你需要的值。

    $('.ui-spinner-button').click(function() { $(this).siblings('input').change(); });
    
    $('#f_4').spinner().change(function() {
       var f4Val = $('#f_4').val();
       var calcValue = (f4Val/3)*100;
       $('input[name="f_7-textbooks"]').val(calcValue);
    });
    

    看到这个fiddle

    【讨论】:

    • 谢谢@nicholas-murray!我试过让它在页面中工作,但我必须不正确地实现它。我尝试了以下方法:1)将其直接放在 下方,2)用代码替换 行,3)将脚本添加到页面中已经存在的 javascript 的末尾。我还在“function()”之后添加了一个“{”,因为它似乎丢失了。 (如果解决方案很明显,我很抱歉。我是 Javascript 的初学者。)
    • 这比我最初想象的要棘手 - 请参阅上面的代码和小提琴,将上面的脚本放在您对 jquery 的引用下方,就在您的结束正文标记上方
    • 谢谢你,尼古拉斯!这效果很好。 media.briercrest.ca/calculators/…
    • 网站看起来很酷,漂亮又现代,不过您可能希望将这个数字四舍五入到小数点后两位...
    • 感谢您的提示!我在您的脚本中添加了一行以四舍五入到小数点后 2 位:jsfiddle.net/lukenjohnson/Dc43A/5
    猜你喜欢
    • 1970-01-01
    • 2014-01-31
    • 2012-10-03
    • 1970-01-01
    • 2012-04-28
    • 1970-01-01
    • 2015-05-16
    • 2022-06-28
    • 1970-01-01
    相关资源
    最近更新 更多