Question

我的代码的目的是解决一个由三个方程组成的系统。我想要发生的是“p”选择器和“答案”类被隐藏。当“h1”选择器上有“click”事件时，我希望它显示下一个元素。但是，在类“按钮”上有一个click事件后，我希望“matrix”类向上滑动，然后“answer”类向下滑动，在隐藏或“slideUp”时显示HTML表单结果的答案原始形式和标题。

最初，“my_code.js”文件在隐藏“p”元素时没有问题，并且在单击h1选择器之前对其进行slideToggling，但是一旦我添加了其他代码，事情就会向南移动。

我的jquery脚本中发生了什么？我是否错误地定位了祖先元素？

JQUERY DOCUMENT

$(document).ready(function() {
    $("p, .answer").hide();


    $("h1").click(function() { 
        $(this).next().slideToggle(300);
    });

    $(".button")click(function() { //after form submission
        $(".matrix").slideUp(300, function(){ //hiding the matrix form
            $(".answer").slideDown(300); //and display the answer
        });
    });

});

HTML文档

<!DOCTYPE html>
<html>

<head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
    <title>Kremer's Rule: System of Three Equations</title>

    <script language="JavaScript">
    function testResults (form) {
        function system (x1, x2, x3, y1, y2, y3, z1, z2, z3, a1, a2, a3){
           this.x1 = x1;
           this.x2 = x2;
           this.x3 = x3;
           this.y1 = y1;
           this.y2 = y2;
           this.y3 = y3;
           this.z1 = z1;
           this.z2 = z2;
           this.z3 = z3;
           this.a1 = a1;
           this.a2 = a2;
           this.a3 = a3;
           this.calcDanswer = function() {
               return (this.x1*((this.y2*this.z3)-(this.z2*this.y3))) - (this.y1*((this.x2*this.z3)-(this.z2*this.x3))) + (this.z1*((this.x2*D.y3)- (this.y2*this.x3)));
           };
           this.calcXanswer = function(){
               return (this.a1*((this.y2*this.z3)-(this.z2*this.y3))) - (this.y1*((this.a2*this.z3)-(this.z2*this.a3))) + (this.z1*((this.a2*this.y3)-(this.y2*this.a3)));
           };
           this.calcYanswer = function(){
               return (this.x1*((this.a2*this.z3)-(this.z2*this.a3))) - (this.a1*((this.x2*this.z3)-(this.z2*this.x3))) + (this.z1*((this.x2*this.a3)-(this.a2*this.x3)));
           };
           this.calcZanswer = function(){
               return (this.x1*((this.y2*this.a3)-(this.a2*this.y3))) - (this.y1*((this.x2*this.a3)-(this.a2*this.x3))) + (this.a1*((this.x2*this.y3)-(this.y2*this.x3)));
           };
        }

        var x1 = form.x1.value;
        var x2 = form.x2.value;
        var x3 = form.x3.value;
        var y1 = form.y1.value;
        var y2 = form.y2.value;
        var y3 = form.y3.value;
        var z1 = form.z1.value;
        var z2 = form.z2.value;
        var z3 = form.z3.value;
        var a1 = form.a1.value;
        var a2 = form.a2.value;
        var a3 = form.a3.value;

        var D = new system(x1, x2, x3, y1, y2, y3, z1, z2, z3, a1, a2, a3);
        var X = D.calcXanswer()/D.calcDanswer();
        var Y = D.calcYanswer()/D.calcDanswer();
        var Z = D.calcZanswer()/D.calcDanswer();


       // printing to console
       var out = document.getElementById('real-answer');
       out.innerHTML += "<b>The equations are:</b>" + "<br />" +
       D.x1 + "x + " + D.y1 + "y + " + D.z1 +"z = "+D.a1 + "<br />" +
       D.x2 + "x + " + D.y2 + "y + " + D.z2 +"z = "+D.a2 + "<br />" +
       D.x3 + "x + " + D.y3 + "y + " + D.z3 +"z = "+D.a3 + "<br /><br />" +

       "The answer for D is " + D.calcDanswer() + "<br />" +
       "The answer for Dx is " + D.calcXanswer() + "<br />" +
       "The answer for Dy is " + D.calcYanswer() + "<br />" +
       "The answer for Dy is " + D.calcZanswer() + "<br />" +
       "X is " + X + "<br />" +
       "Y is " + Y + "<br />" +
       "Z is " + Z;        
    } 
    </SCRIPT>
</head>

<body>
    <!--DIRECTIONS-->
    <h1><span id="highlight">How Does This Work?</span></h1>
    <p>Type in all the information for your system of three equations.<br />
    When finished hit "Go".</p>

    <!--Form-->
    <p class="matrix">
        <FORM NAME="myform" ACTION="" METHOD="GET">
        <input type="text" name="x1"> x + <input type="text" name="y1"> y + <input type="text" name="z1"> z = <input type="text" name="a1"><br />
        <input type="text" name="x2"> x + <input type="text" name="y2"> y + <input type="text" name="z2"> z = <input type="text" name="a2"><br />
        <input type="text" name="x3"> x + <input type="text" name="y3"> y + <input type="text" name="z3"> z = <input type="text" name="a3"><br />
        <input type="button" class="button" name="button" value="GO" onClick="testResults(this.form)">
        </form>
    </p>

        <div id="answer">
        <h1><span id="highlight">The Answer:</span></h2>
        <div id='real-answer'></div>        
    </div>

</body>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>

</html>

Answer 1

您的Jquery代码行＃9：

$(".button")click(function() {

你错过了一个“。”在选择器之后：

$(".button").click(function() {

Answer 2

我看到了很多问题：

您错过了$(".button")click中的一段时间，应为$(".button").click
小提琴有一个结束脚本标签（在那里不需要，fyi）但你没有document.ready功能的右括号
你有一个内联onClick处理程序调用document.ready函数中定义的函数。这对于html元素是不可见的。你已经使用了jquery，所以只需使用点击处理程序
对于计算器部分，您有几个相互包裹的函数，这是不需要的，并且会导致一些范围问题。当您拥有document.getElement*选择器时，您正在将原生js与jquery混合，$类型代码

fiddle让你入门

Answer 3

您的第二个<h1>（新的</h2>已关闭{{1}}。（可能不是主要问题。）

Jquery嵌套函数不起作用

3 个答案: