-1
但是，注释掉的JavaScript可行，但我需要在jQuery中使用它来实现移动触摸功能。所以我试图转换成jQuery，但它不能正常运行。这个程序做的是计算二次方程。对不起，变量名称。我的错误是什么？该网页加载，但当我按下按钮什么也没有发生。Jquery代码不工作，但JavaScript是。我的错误是什么？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Quadratic Calculator</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/flatly/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
.jumbotron {
background-color: aliceblue;
}
body {
background-color: aliceblue;
font-family: sans-serif;
color: black;
}
.equation {
font-size: 1.75rem;
background-color: aliceblue;
text-align: center;
font-family: sans-serif;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
}
h1 {
text-align: center;
}
button {
text-align: center;
font-size: 2em;
font-weight: bold;
}
input {
width: 5rem;
}
#or {
display: none;
}
#x2 {
display: none;
}
.button-secondary {
background: rgb(66, 184, 221);
/* this is a light blue */
color: white;
}
</style>
</head>
<body>
<div class="container">
<!-- Quadratic Equation -->
<div class="page-header">
<h1>Quadratic Calculator</h1></div>
<div class="jumbotron"> <input type="number" class="equation" name="a" id="a"> <span class="equation">x<sup>2</sup>+ </span> <input type="number" class="equation" name="b" id="b"> <span class="equation">x+ </span> <input type="number" class="equation" name="c" id="c">
<span class="equation">= 0</span> <br> <br> <button id='submit' class="btn btn-success">Submit</button> <br> <br> <button id='clear' class="btn button-secondary">Clear</button>
<h2 id='x1'>x=</h2>
<h2 id="or">or</h2>
<h2 id='x2'>x=</h2> </div>
</div>
<!--<script>
var submit = document.getElementById('submit');
var clear = document.getElementById('clear');
function quadraticFunction() {
var or = document.getElementById('or');
var x2 = document.getElementById('x2');
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
var c = document.getElementById("c").value;
var x1 = document.getElementById('x1');
if (a === null) {
a = 1;
}
var d = Math.sqrt((b * b) - (4 * a * c));
var answer1 = (-b - d)/(2 * a);
var answer2 = (-b + d)/(2 * a);
if (isNaN(answer1) && isNaN(answer2)) {
x1.innerHTML = "x = imaginary number";
or.style.display = "none";
x2.style.display = "none";
} else {
if (a == 0) {
x1.innerHTML = "This is not a quadratic equation!";
}
if (answer1 == answer2) {
x1.innerHTML = "x = " + answer1;
or.style.display = "none";
x2.style.display = "none";
} else {
x1.innerHTML = "x = " + answer1;
x2.innerHTML = "x = " + answer2;
or.style.display = "block";
x2.style.display = "block";
}
}
}
var clearer = function() {
var x1 = document.getElementById('x1');
var x2 = document.getElementById('x2');
var or = document.getElementById('or');
x1.innerHTML = "x =";
x2.style.display = "none";
or.style.display = "none";
}
;
submit.addEventListener("click", quadraticFunction);
clear.addEventListener("click", clearer);
</script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script>
var submit = $("#submit");
var clear = $("#clear");
function quadraticEquation() {
//Declaring variables
var or = $("#or");
var x1 = $("#x1");
var x2 = $("#x2");
var a = $("#a").val();
var b = $("#b").val();
var c = $("#c").val();
if (a == null) {
a = 1;
}
var d = Math.sqrt((b * b) - (4 * a * c));
var answer1 = (-b - d)/(2 * a);
var answer2 = (-b + d)/(2 * a);
if (a == 0) {
x1.text(“This is not a quadratic equation!”);
or.css(“visibility”, “hidden”);
x2.css(“visibility”, “hidden”);
return;
}
if (isNaN(answer1) && isNaN(answer2)) {
x1.text(“x = imaginary number”);
or.css(“display”, “none”);
x2.css(“display”, “none”);
} else {
if (answer1 == answer2) {
x1.text(“x = “+answer1);
or.css(“display”, “none”);
x2.css(“display”, “none”);
} else {
x1.text(“x = “+answer1);
x2.text(“x = “+answer2);
or.css(“display”, “block”);
x2.css(“display”, “block”);
}
}
}
function clearer() {
var or = $("#or");
var x1 = $("#x1");
var x2 = $("#x2");
x1.text(“x = “);
or.css(“display”, “none”);
x2.css(“display”, “none”);
}
submit.on(“click”, function() {
quadraticEquation();
});
clear.on(“click”, function() {
clearer();
});
</script>
</body>
</html>
你能详细说明你的代码“不起作用”吗？你在期待什么，究竟发生了什么？如果您遇到异常/错误，请发布其发生的行和异常/错误的详细信息。请[编辑]这些细节或我们可能无法提供帮助。 – FrankerZ
请检查您的jQuery版本中的引号，它们看起来像是从源代码中用“智能引号”复制的，因此它们不匹配。 – jmoerdyk
你的jQuery代码真的有非标准的引号，比如'''“”'或者是复制和粘贴的工件吗？ –