2014-02-13 90 views
0

我的代碼的目的是解決三個方程的系統。 我想要發生的是「p」選擇器和「答案」類被隱藏。當在「h1」選擇器上發生「點擊」事件時,我希望它顯示下一個元素。但是,在類「按鈕」上有一個點擊事件之後,我希望「矩陣」類向上滑動,然後「答案」類向下滑動,在隱藏或「滑動」時揭示HTML表單結果的答案原始形式和標題。Jquery嵌套函數不工作

最初,「my_code.js」文件沒有隱藏「p」元素並在點擊之前隱藏「p」元素和slideToggling h1選擇器,但是一旦我添加了額外的代碼,事情就會向南。

我的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> 
+2

是什麼「東西南下」是什麼意思?你可以做一個小提琴/演示嗎? – helion3

+0

@ helion3我從來沒有提出小提琴之前,但這是我的悲傷嘗試http://jsfiddle.net/5bhKR/ jquery代碼包含在一個名爲「my_code.js」的單獨文件中,但我不知道如何包括與小提琴 – beckah

回答

0

你的第二個<h1>(新一)是封閉的</h2>。 (可能不是首要問題。)

+0

是不是原因,但謝謝你幫我清理我的代碼 – beckah

3

jQuery代碼行#9: 「」

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

你缺少一個選擇後:

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

我看到了一些問題:

  • 你錯過了$(".button")click一個時期,應該是$(".button").click
  • 小提琴有關閉腳本標籤(這是不是需要在那裏,fyi)但您沒有右括號用於document.ready函數
  • 您有一個inline onClick處理程序調用document.ready函數中定義的函數。這對HTML元素不可見。你已經使用jquery了,所以只需要使用一個點擊處理程序
  • 你有幾個函數在計算器部分相互包裝,這是不需要的,並會導致一些範圍問題。你是混合本地JS與jQuery爲好,document.getElement*類型代碼,當你有可用的$選擇

一個fiddle讓你開始