Question

被困在这几个小时，没有想法。我有两个BMI方程（公制，标准），两者都正常工作。我在Jquery UI选项卡中设置了表单。第一个等式（公制）非常有效。我似乎无法让第二个方程起作用。它在独立时有效，但在我用第一个等式插入时则无效。我是否应该没有为第二个等式创建新的脚本标记？

<html>

<head>

<link rel="stylesheet" href="../jquery-ui/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="../jquery-mousewheel-master/jquery.mousewheel.min.js"></script>




<script>
    $(function() {
        // get user input
        var input = function() {
            var height = $("#height").val();
            var weight = $("#weight").val();
            var calculated_bmi = BMI(height, weight);
            $('#result').text(calculated_bmi);

        }

        var BMI = function(h, w) {
            // convert into centimeters
            var h = h / 100;
            var h_squared = h * h;
            var result = w / h_squared;
            return result.toFixed(1);
        }

        $("#calculate").click(function() {
            input();
        })


        $(function() {
            $("#tabs").tabs();
        });

        $("#weight").spinner();
        $("#height").spinner();




    });

</script>

<script>

    "use strict";
    $(function() {
        $("#bmicalc").submit(function(e) {
            e.preventDefault();

            var heightFt = $("#height_ft").val();
                heightIn = $("#height_in").val();
                height = parseFloat(heightFt * 12) + parseFloat(heightIn);
            weight = $("#weight1").val();
                BMI = calculateBMI(height, weight);

            $("#result2").text('Your BMI is ' + BMI);
        });


    function calculateBMI(height, weight) {
        var BMI = (weight / (height * height)) * 703

        return Math.round(BMI * Math.pow(10, 2)) / Math.pow(10, 2);
    }


        $("#weight").spinner();
        $("#height").spinner();
        $("#height_ft").spinner();
        $("#height_in").spinner();
        $("#weight1").spinner();



 });



</script>


</head>

<body>


<div class="wrapper">
    <h2 class="subtitle">Enter your information</h2>

    <form id="bmicalc">

        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Metric</a></li>
                <li><a href="#tabs-2">Standard</a></li>
            </ul>
            <div id="tabs-1">
                <div>
                    <div>
                        Height (centimeters): <input type="spinner" id="height" min="1" max="300"> Weight (kilograms): <input type="spinner" id="weight" min="1" max="450">

                    </div>

                    <input type="button" id="calculate" value="Calculate">
                    <p class="resultwords">Your BMI is: <span id="result"></span></p>

                </div>

            </div>

            <div id="tabs-2">
                <div id="calc-id2">
                <p>
                    <label>Height:
            <input type="text" id="height_ft" min="1" max="10">feet
            <input type="text" id="height_in" min="1" max="11">inches</label>
                </p>
                <p>
                    <label>Weight:
            <input type="text" id="weight1" min="1" max="1000">pounds</label>
                </p>


                    <input type="submit" id="bmicalc1" value="Calculate">
                    <p class="resultwords">Your BMI is: <span id="result2"></span></p>



                    </div>


            </div>

        </div>

     </form>



 </div>




 </body>





</html>

Jquery BMI方程在表单标签

0 个答案: