Fatal编程技术网
  • jquery/
  • Jquery slideToggle（）不工作

Jquery slideToggle（）不工作

jquery

Jquery slideToggle（）不工作,jquery,slidetoggle,Jquery,Slidetoggle,我是jquery新手，正在练习代码构建工资计算器。我希望用户单击“输入小时”以显示小时字段。我添加了一种显示样式：无以在页面加载时隐藏字段，但当我尝试单击“输入小时数”时，什么也没有发生。谁能告诉我我做错了什么，提前谢谢 HTML代码 <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Payroll Calculat

我是jquery新手，正在练习代码构建工资计算器。我希望用户单击“输入小时”以显示小时字段。我添加了一种显示样式：无以在页面加载时隐藏字段，但当我尝试单击“输入小时数”时，什么也没有发生。谁能告诉我我做错了什么，提前谢谢

HTML代码

  <!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代码

$(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>');

});
});

$（文档）.ready（函数（）{
$（'enterHours'）。在（'click'，function（）上{
$（'.hours'）。滑动切换（'slow'）；
});
$（“按钮”）。在（'click'，function（）上{
var firstName=$（'#firstName'）.val（）；
var lastName=$（'#lastName'）.val（）；
var rateType=$（“输入：选中”）.val（）；
风险值比率=$（“#比率”）.val（）；
var regHours=$（'#regularhurs'）.val（）；
var otHours=$（'#overtimeHours'）.val（）；
var otherHours=$（'#otherHours'）.val（）；
var regEarnings=$（'#regularEarnings'）.val（）；
var otEarnings=$（“#超额收益”）.val（）；
var otherEarnings=$（'#otherEarnings'）.val（）；
函数calculateGross（）{
var grossWages=0；
var收益=parseFloat（regEarnings）+parseFloat（otEarnings）+parseFloat（otherEarnings）；
如果（费率类型=“每小时”）{
grossWages=（parseFloat（regHours）+（parseFloat（otHours）*1.5）+parseFloat（otherHours））*费率；
总收入+=收入；
控制台。日志（总重）；
控制台日志（类型（格罗斯韦））；
console.log（rateType）；
}否则，如果（费率类型=“工资”）{
总收入=收入；
控制台。日志（总重）；
console.log（rateType）；
}
返回分析浮点数（grossWages）.toFixed（2）；
}
函数calculateSocSec（）{
var socSec=parseFloat（calculateGross（）*.062）.toFixed（2）；
控制台日志（socSec）；
返回socSec；
}
函数calculateMed（）{
var med=parseFloat（calculateGross（）*.0145）.toFixed（2）；
控制台日志（med）；
返回医学院；
}        
$（'.name'）.append（''+firstName+''+lastName+'
'）；
$（'.rateType'）。追加（''+rateType+'
'）；
$（'.rate'）。追加（''+rate+'
'）；
$（'.regHours'）。追加（''+regHours+'
'）；
$（'.otHours'）。追加（''+otHours+'
'）；
$（'.otherHours'）。追加（''+otherHours+'
'）；
$（'.regEarnings'）。追加（''+regEarnings+'
'）；
$（'.otEarnings'）。追加（''+otEarnings+'
'）；
$（'.otherEarnings'）。追加（''+otherEarnings+'
'）；
$（'.gross'）.append（''+calculateGross（）+'
'）；
$（'.socsec'）.append（''+calculateSocSec（）+'
'）；
$（'.med'）.append（''+calculateMed（）+'
'）；
});
});
这是您的元素：

<div class="enterHours">
    <h4>Enter Hours</h4>
</div>
这会解决你的问题

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