Question

我是jquery的新手，我正在练习构建工资单计算器的代码。我希望用户点击＆＃34;输入营业时间＆＃34;显示小时字段。我添加了一种 display：none 样式来隐藏页面加载时的字段，但是当我尝试点击＆＃34;输入时间＆＃34;什么都没发生。有人可以提前了解我做错了什么，感谢提前。

HTML CODE

  <!DOCTYPE HTML>
  <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Payroll Calculator</title>
    <meta name="viewport" contect="width=devide-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/myStyle.css">
    <script src="js/jquery.js"></script>
</head>

<body>
    <header>
        <div class="container">
            <div class="col-xs-12">               
                <h1>Payroll Calculator</h1>
            </div>    
        </div>
    </header>

<div class="container">
    <section class="main row">

        <article class="col-xs-12 col-sm-6 col-md-6">
        <h3>Employee</h3>

        <form>
            <div class="form-group">
                <label for="firstName">First Name</label>
                <input type="text" class="form-control" id="firstName" aria-describedby="firstName" placeholder="Enter First Name">
            </div>
            <div class="form-group">
                <label for="lastName">Last Name</label>
                <input type="text" class="form-control" id="lastName" aria-describedby="lastName" placeholder="Enter Last Name">
            </div>

            <fieldset class="form-group">
            <div class="form-check">
                <label class="form-check-label">Rate Type</label>
            </div>
            <div class="form-check" id="rateType">
                <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optionsRadios" id="hourlu" value="hourly">Hourly
                <input type="radio" class="form-check-input" name="optionsRadios" id="salary" value="salary">Salary
                </label>
            </div>
            </fieldset>

            <div class="form-group">
                <label for="rate">Rate</label>
                <input type="number" class="form-control" id="rate" aria-describedby="rate" placeholder="Enter Employee's Rate">
            </div>

            <div class="enterHours">
                <h4>Enter Hours</h4>
            </div>                    

            <div class="hours">
            <div class="form-group">
                <label for="regularHours">Regular Hours</label>
                <input type="number" class="form-control" id="regularHours" aria-describedby="regularHours">
            </div> 

            <div class="form-group">
                <label for="overtimeHours">Overtime Hours</label>
                <input type="number" class="form-control" id="overtimeHours" aria-describedby="overtimeHours">
            </div> 

            <div class="form-group">
                <label for="otherHours">Other Hours</label>
                <input type="number" class="form-control" id="otherHours" aria-describedby="otherHours">
            </div>
            </div>                                                                

            <div class="form-group earnings">
                <label for="regularEarnings">Regular Earnings</label>
                <input type="text" class="form-control" id="regularEarnings" aria-describedby="regularEarnings">
            </div> 

            <div class="form-group earnings">
                <label for="overtimeEarnings">Overtime Earnings</label>
                <input type="text" class="form-control" id="overtimeEarnings" aria-describedby="overtimeEarnings">
            </div> 

            <div class="form-group earnings">
                <label for="otherEarnings">Other Earnings</label>
                <input type="text" class="form-control" id="otherEarnings" aria-describedby="otherEarnings">
            </div>                

            <button type="button" class="btn btn-primary">Submit</button>
        </form>                    

        </article>

        <aside class="col-xs-12 col-sm-6 col-md-6">
            <h3 class="results">Results</h3>
            <ul>
                <li class="name">Name:</li>
                <li class="rateType">Rate Type:</li>
                <li class="rate">Rate:</li>
                <li class="regHours">Regular Hours:</li>
                <li class="otHours">Overtime Hours:</li>
                <li class="otherHours">Other Hours:</li>
                <li class="regEarnings">Regular Earnings:</li>
                <li class="otEarnings">Overtime Earnings:</li>
                <li class="otherEarnings">Other Earnings:</li>
                <li class="gross">Gross Pay:</li>
                <li class="socsec">Social Security Tax:</li>
                <li class="med">Medicare Tax:</li>

            </ul>
        </aside>
    </section>
</div>

<footer>
    <div class="container" >
        <h3>Andres Quintero</h3>
    </div>
</footer>

<script src="js/app.js"></script>
</body>

JQUERY CODE

$(document).ready(function(){

$('enterHours').on('click', function(){
    $('.hours').slideToggle('slow');
});

$("button").on('click', function(){
    var firstName = $('#firstName').val();
    var lastName = $('#lastName').val();
    var rateType = $( "input:checked" ).val();
    var rate = $('#rate').val();
    var regHours = $('#regularHours').val();
    var otHours = $('#overtimeHours').val();
    var otherHours = $('#otherHours').val();
    var regEarnings = $('#regularEarnings').val();
    var otEarnings = $('#overtimeEarnings').val();
    var otherEarnings = $('#otherEarnings').val();

    function calculateGross (){
        var grossWages = 0;
        var earnings = parseFloat(regEarnings) + parseFloat(otEarnings) + parseFloat(otherEarnings);

        if(rateType == "hourly"){
            grossWages = (parseFloat(regHours) + (parseFloat(otHours) * 1.5) + parseFloat(otherHours)) * rate;
            grossWages += earnings;
            console.log(grossWages);
            console.log(typeof(grossWages));
            console.log(rateType);                
        }else if (rateType == "salary"){
            grossWages = earnings;
            console.log(grossWages);
            console.log(rateType);
        }

        return parseFloat(grossWages).toFixed(2);
    }

    function calculateSocSec (){

        var socSec = parseFloat(calculateGross() * .062).toFixed(2);
        console.log(socSec);
        return socSec;
    }

    function calculateMed(){

        var med = parseFloat(calculateGross() * .0145).toFixed(2);
        console.log(med);
        return med;
    }        


    $('.name').append('<p>' + firstName + " " + lastName + '</p>');
    $('.rateType').append('<p>' + rateType + '</p>');
    $('.rate').append('<p>' + rate + '</p>');
    $('.regHours').append('<p>' + regHours + '</p>');
    $('.otHours').append('<p>' + otHours + '</p>');
    $('.otherHours').append('<p>' + otherHours + '</p>');
    $('.regEarnings').append('<p>' + regEarnings + '</p>');
    $('.otEarnings').append('<p>' + otEarnings + '</p>');
    $('.otherEarnings').append('<p>' + otherEarnings + '</p>');
    $('.gross').append('<p>' + calculateGross() + '</p>');
    $('.socsec').append('<p>' + calculateSocSec() + '</p>');
    $('.med').append('<p>' + calculateMed() + '</p>');

});
});

Answer 1

这是你的元素：

<div class="enterHours">
    <h4>Enter Hours</h4>
</div>

所以，enterHours就是这个类。

你在选择器中错过了一个点以选择该类。

   v
$('.enterHours').on('click', function(){

这将解决您的问题。

slideToggle（）不起作用

1 个答案: