Question

使用h1标签上的动画制作小费计算器，然后单击h2标签上的slideDown和slideUp。问题是，没有任何动画正在播放，点击事件也不起作用。这是HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tip Calculator</title>
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="stylesheet" href="midtermcss.css">
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
    <script src="animationJS.js"></script>
</head>

<body>
    <section id="faqs">
        <h1>Tip facts</h1>
        <h2>Things to know before you tip</h2>
        <div>
            <p>Tips Account for 44 Billion dollars of the Food Industry</p>

            <p>7 States require servers to be paid minimum wage like everyone else</p>
                <ul>
                    <li>Minnessota</li>
                    <li>Montana</li>
                    <li>Washington</li>
                    <li>Oregon</li>
                    <li>California</li>
                    <li>Nevada</li>
                    <li>Alaska</li>
                </ul>
            <p>Current Federal minimum tipped wage is $2.13 per hour can you live on that?</p>
            <p>Charging with Credit/Debit cards tends to reduce the average tip</p>
        </div>      
    </section>

    <section id="js">
    <h1 id="heading">Tip Calculator</h1>
        <label for="billAmount">Total Amount Of Bill:</label>
        <input type="text" id="billAmount"><br>

        <label for="percentTip">Percent To Tip:</label>
        <input type="text" id="percentTip"><br>

        <label for="amountPeople">How Many People?:</label>
        <input type="text" id="amountPeople"><br>

        <label for="totalTip">Tip Total:</label>
        <input type="text" id="totalTip"><br>

        <label>&nbsp;</label>
        <input  type="button" id="calculate" value="Calculate"><br>
    </section>
</body>
</html>

这是JS文件。

$(document).ready(function() {
    // runs when an h2 heading is clicked
    $("#faqs h2").toggle(
        function() {
            $(this).toggleClass("minus");
            $(this).next().slideDown(1000, "easeOutBounce");
        },
        function() {
            $(this).toggleClass("minus");
            $(this).next().slideUp(1000, "easeInBounce");
        }
    );

    $("#faqs h1").animate({
        fontSize: "400%",
        opacity: 1,
        left: "+=375"
    }, 1000, "easeInExpo")
        .animate({
        fontSize: "175%",
        left: "-=200"
    }, 1000, "easeOutExpo");

    $("#faqs h1").click(function() {
        $(this).animate({
            fontSize: "400%",
            opacity: 1,
            left: "+=375"
        }, 2000, "easeInExpo")
            .animate({
            fontSize: "175%",
            left: 0
        }, 1000, "easeOutExpo");
    });

});


var $ = function(id) {
    return document.getElementById(id);
}
var calculateClick = function() {
    var billAmount = parseFloat($("billAmount").value);
    var percentTip = parseFloat($("percentTip").value);
    var amountPeople = parseInt($("amountPeople").value);

    if (isNaN(billAmount) || billAmount <= 0) {
        alert("Your bill can't be 0 or less.");
    } else if (isNaN(percentTip) || percentTip <= 0) {
        alert("The percentage should be a whole number.");
    } else if (isNaN(amountPeople) || amountPeople <= 0) {
        alert("You are 1 person never count yourself as less.");
    } else {
        var total = billAmount * (percentTip / 100) / amountPeople;
        $("totalTip").value = total.toFixed(2);
    }
}

window.onload = function() {
    $("calculate").onclick = calculateClick;
    $("billAmount").focus();
}

最后但并非最不重要的是CSS文件，因为开放和减去类列在那里

        * {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    margin: 0 auto;
    width: 500px;
    border: 3px solid blue;
}
section {
    padding: 0 1em .5em;
}
section.js {
    padding: 0 1em .5em;
}
h1 {
    text-align: center;
    margin: .5em 0;
}
label {
    float: left;
    width: 10em;
    text-align: right;
}
input {
    margin-left: 1em;
    margin-bottom: .5em;
}
#faqs h1 { 
    position: relative;
    left: -168px;
    font-size: 125%;
    color: blue;
}
h2 {
    font-size: 120%;
    padding: .25em 0 .25em 25px;
    cursor: pointer;
    background: url(images/plus.png) no-repeat left center;
}
h2.minus {
    background: url(images/minus.png) no-repeat left center;
}
div.open {
    display: block;
}
ul {
    padding-left: 45px;
}
li {
    padding-bottom: .25em;
}
p {
    padding-bottom: .25em;
    padding-left: 25px;
}

我无法弄清楚为什么动画在一个单独的测试文件中工作，但是当我现在在我的小费计算器中使用它们时，他们却没有。我正在使用Murach的Javascript和Jquery书，但这一部分非常难以理解。

Answer 1

您的问题是您包含jQuery但稍后在全局范围内重新定义$：

var $ = function(id) {
    return document.getElementById(id);
}

小提琴：http://jsfiddle.net/AtheistP3ace/u0von3g7/

我所做的就是更改保存该功能的变量名称，并将其替换为您正在使用它的区域。具体做法是：

var getById = function(id) {
    return document.getElementById(id);
}
var calculateClick = function() {
    var billAmount = parseFloat(getById("billAmount").value);
    var percentTip = parseFloat(getById("percentTip").value);
    var amountPeople = parseInt(getById("amountPeople").value);

    if (isNaN(billAmount) || billAmount <= 0) {
        alert("Your bill can't be 0 or less.");
    } else if (isNaN(percentTip) || percentTip <= 0) {
        alert("The percentage should be a whole number.");
    } else if (isNaN(amountPeople) || amountPeople <= 0) {
        alert("You are 1 person never count yourself as less.");
    } else {
        var total = billAmount * (percentTip / 100) / amountPeople;
        getById("totalTip").value = total.toFixed(2);
    }
}

window.onload = function() {
    getById("calculate").onclick = calculateClick;
    getById("billAmount").focus();
}

$只是jQuery的简写。当你包含jQuery时，它为你创建了两个函数，它们都做同样的事情。 jQuery和$。如果你设置$等于其他东西你已经有效地覆盖了页面中包含的jQuery库，它将不再像你期望的那样运行。所有jQuery功能都从使用$或jQuery函数开始。一旦它返回一个jQuery对象，你可以开始链接并调用那些对象的函数，但是为了得到一个jQuery对象，你需要使用jQuery或$函数。

您在上面的评论中提到过您的老师让您这样做以解决问题。我想这是因为jQuery最初没有被包含在内，所以他只是创建了$选择器函数来让你移动但是我希望他能解释为什么他这样做以及它如何影响以后的事情。

动画无法在加载或在Javascript中单击时播放

1 个答案: