【发布时间】：2014-02-13 12:01:23
【问题描述】：
我的代码的目的是求解一个由三个方程组成的系统。 我想要发生的是隐藏“p”选择器和“answer”类。当“h1”选择器上有“click”事件时，我希望它显示下一个元素。但是，在“按钮”类上有一个单击事件后，我希望“矩阵”类向上滑动，然后“答案”类向下滑动，在隐藏或“向上滑动”时显示 HTML 表单结果的答案原始表格和标题。
最初，“my_code.js”文件隐藏“p”元素并在单击之前的 h1 选择器时滑动切换它没有问题，但是一旦我添加了附加代码，事情就向南了。
我的 jquery 脚本中发生了什么？我是否错误地定位了祖先元素？
JQUERY 文档
$(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>
【问题讨论】：
-
“事情向南”是什么意思？你能做一个小提琴/演示吗？
-
@helion3 我以前从未做过小提琴，但这是我的悲伤尝试jsfiddle.net/5bhKR jquery 代码包含在一个名为“my_code.js”的单独文件中，但我不确定如何用小提琴包含它
标签： javascript html forms jquery-ui dom