Question

一直在努力让我的计算器正常工作。我使用PHP，JS和CSS对计算器进行了编码。非常基本但是当按下计算按钮时，计算没有完成。这是我的代码。

<?php
/*
Template Name: Calculator
*/

wp_enqueue_script('calc_js', get_bloginfo('template_url').'/library/calc.js');
wp_enqueue_style('calc_css', get_bloginfo('template_url').'/library/calc.css');
get_header(); ?>

    <?php
        while ( have_posts() ) : the_post();
        ?>
        <div id="page-content-container">

            <article <?php post_class('clearfix') ?> id="post-<?php the_ID(); ?>">

                <div class="entry-content">
                    <?php the_content(); ?>

                    <div class="row-fluid" id="">
                    <div class="calc span6">
                        <h3>Payment Calculator</h3>
                        <p>Our monthly payment calculator will help you work out how much your purchase may cost with various loan amounts. Enter your figures into the top section, then click 'Calculate'. If you want to try different figures you can 'Clear' the form.</p>
                        <form action="#" method="post">
                            <p>
                                <label>Purchase price*</label>
                                <span class="field">£ <input class="purchase"/></span>
                            </p>
                            <p>
                                <label>Loan amount*</label>
                                <span class="field">£ <input class="loan"/></span>
                            </p>
                            <p>
                                <label>LTV (Loan To Value)</label>
                                <span class="field"><input class="blank ltv"/> %</span>
                            </p>
                            <p>
                                <label>Interest Only*</label>
                                <span class="field">£ <input onfocus="this.blur()" class="blank interest"/></span>
                            </p>
                            <input class="reset" type="reset" value="Clear"/><input class="calculate" type="button" value="Calculate"/>
                        </form>
                        <p><em>* Need to also consider cost of repayment method to repay your loan. This information is for illustrative purposes only and does not contain all of the details you need to choose a loan.</em></p>
                    </div><!-- /.calc -->

                    <div class="calc2 span6">
                        <h3>Yield Calculator</h3>
                        <p>The yield calculator will help you measure the return of an investment property by comparing rental income and property value. The yield is the amount of rent generated each year expressed as a percentage of the property value or purchase price.</p>
                        <form action="#" method="post">
                            <p>
                                <label>Monthly Rent</label>
                                <span class="field">£ <input class="rent"/></span>
                            </p>
                            <p>
                                <label>Property Value</label>
                                <span class="field">£ <input class="loan"/></span>
                            </p>
                            <p>
                                <label>Yield</label>
                                <span class="field"><input onfocus="this.blur()" class="yield blank"/> %</span>
                            </p>
                            <input class="reset" type="reset" value="Clear"/><input class="calculate" type="button" value="Calculate"/>
                        </form>
                        <p><em>* This calculator is based on the gross yield. It is based on the property being tenanted and receiving rent for 12 months of the year. This information is for illustration purposes only and doesn’t take into account any other costs associated with the property.</em></p>
                    </div><!-- /.calc2 -->
                    </div><!-- /.row-fluid-->
                </div><!-- .entry-content -->

            </article>

        </div>
        <?php
        endwhile;
    ?>

<?php get_footer(); ?>

这是我的JS代码：

jQuery(document).ready(function() {

    jQuery('.calc .calculate').click(function() {
        var parent = jQuery(this).parents('.calc');
        parent.find('.error').removeClass('error');

        var error = false;

        var purchase = parent.find('.purchase');
        var loan = parent.find('.loan');

        var purchaseval = purchase.val();
        if (isNaN(purchaseval) || purchaseval == '') {
            error = true;
            purchase.addClass('error');
        }
        var loanval = loan.val();
        if (isNaN(loanval) || loanval == '') {
            error = true;
            loan.addClass('error');
        }

        if (error == false) {
            var perc = (loanval / purchaseval) * 100;
            parent.find('.ltv').val(perc.toPrecision(2));

            var val = loanval - (loanval * .0125);
            var val2 = loanval - val;
            parent.find('.interest').val(val2);
        }

        return false;
    });

    jQuery('.calc2 .calculate').click(function() {
        var parent = jQuery(this).parents('.calc2');
        parent.find('.error').removeClass('error');
        var error = false;

        var rent = parent.find('.rent');
        var value = parent.find('.loan');

        var rentval = rent.val();
        if (isNaN(rentval) || rentval == '') {
            error = true;
            rent.addClass('error');
        }
        var valueval = value.val();
        if (isNaN(valueval) || valueval == '') {
            error = true;
            value.addClass('error');
        }

        if (error == false) {
            var yieldval = (rentval * 12) / valueval;


            parent.find('.yield').val(yieldval * 100);
        }

        return false;
    });
})

Answer 1

您的js似乎对我很好。见Fiddle

Answer 2

我弄清楚为什么计算器无法正常运行，标题部分的包含文件被移动到页脚，这很简单。

wp_enqueue_script('calc_js', get_bloginfo('template_url').'/library/calc.js');

用于Wordpress的PHP计算器无法正常运行

2 个答案: