Jquery嵌套函数不工作 [英] Jquery Nested Functions Not Working

问题描述

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

最初，my_code.js文件没有问题，隐藏p元素，并在h1选择器被点击之前滑动，但一旦我添加了附加代码，东西向南。

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

JQUERY DOCUMENT

 code> $（document）.ready（function（）{
 $（p，.answer）hide（）; 
 
 
 $（h1 ）.click（function（）{
 $（this）.next（）。slideToggle（300）; 
}）; 
 
 $（。 （function（）{//表单提交后
 $（。matrix）。slideUp（300，function（）{//隐藏矩阵表单
 $（。answer）。slideDown 300）; //并显示答案
}）; 
}）; 
 
}）; 
  

HTML文件

 <！DOCTYPE html> 
< html> 
 
< head> 
< link type =text / css =stylesheethref =stylesheet.css/> 
< title> Kremer's Rule：三等式系统< / title> 
 
< script language =JavaScript> 
函数testResults（form）{
函数系统（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 =新系统（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（）; 
 
 
 //打印到控制台
 var out = document.getElementById（'real-answer'）; 
 out.innerHTML + =< b>等式为：< / 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 /> + 
 
D的答案是+ D.calcDanswer（）+< br /> + 
Dx的答案是+ D.calcXanswer（）+< br /> + 
Dy的答案是+ D.calcYanswer（）+< br /> + 
Dy的答案是+ D.calcZanswer（）+< br /> + 
X是+ X +< br /> + 
Y是+ Y +< br /> + 
Z是+ Z; 
} 
< / SCRIPT> 
< / head> 
 
< body> 
<！ -  DIRECTIONS  - > 
< h1< span id =highlight>如何工作？< / span>< / h1> 
< p>键入您系统的三个方程的所有信息。< br /> 
完成后，点击Go。< / p> 
 
<！ -  Form  - > 
< p class =matrix> 
< FORM NAME =myformACTION =METHOD =GET> 
< input type =textname =x1> x +< input type =textname =y1> y +< input type =textname =z1> z =< input type =textname =a1>< br /> 
< input type =textname =x2> x +< input type =textname =y2> y +< input type =textname =z2> z =< input type =textname =a2>< br /> 
< input type =textname =x3> x +< input type =textname =y3> y +< input type =textname =z3> z =< input type =textname =a3>< br /> 
< input type =buttonclass =buttonname =buttonvalue =GOonClick =testResults（this.form）> 
< / form> 
< / p> 
 
< div id =answer> 
< h1< span id =highlight>答案：< / span>< / h2> 
< div id ='real-answer'>< / div> 
< / div> 
 
< / body> 
 
< script type =text / javascriptsrc =http://code.jquery.com/jquery-1.8.0.min.js>< / script> 
< script type =text / javascriptsrc =my_code.js>< / script> 
 
< / html> 
  

解决方案

您的Jquery代码行＃9：

  $（。button）click（function（）{
  pre> 
 
 
您在选择器后缺少。：
 
  $（。button）。click（function（）{
  
 
The purpose of my code is to solve a system of three equations.
What I want to happen is for the "p" selector and the "answer" class to be hidden. When there is a "click" event on an "h1" selector, I want it to show the next element. However, after there is a click event on the class "button" I want the "matrix" class to slide up and then the "answer" class to slide down, revealing the answer to the HTML form's results while hiding or "slideUp"ing the original form and heading. 

Originally the "my_code.js" file had no problem hiding the "p" element and slideToggling it when an h1 selector before it was clicked, but once I added the additional code, things went south. 

What is happening in my jquery script? Am I targeting ancestors elements incorrectly?

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 DOCUMENT
<!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>

解决方案
Your Jquery code line #9:
$(".button")click(function() {
You are missing a "." after the selector:
$(".button").click(function() {


                        
这篇关于Jquery嵌套函数不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！