首先，我想解释一下我的任务是什么。我不得不使用填充了1到100的数字的php创建一个10X10表，并随机选择一个表格单元格。用户任务是通过单击表来查找该单元格。每次单击后，用户点击之间的距离和所选单元格将打印到文本区域。代码工作正常，但我需要做的另一件事是如果单击的单元格不是正确的单元格，则将单元格的背景颜色更改为红色，如果用户猜到单元格，则将其更改为绿色。我试图将调用更改实现为函数，但是在第二次猜测之后调用它，而不是在第一次调用之后调用。有人可以帮帮我吗？
HTML / PHP代码：
<!DOCTYPE html>
<html>
<head>
<title>find cell</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
table{border-collapse:collapse;}
td{width:50px;height:50px;border: 2px solid #000000; background-color:#ff6600;color:white;text-align:center;}
h2{color:grey;}
</style>
<script type="text/javascript">
function check(x,y){
$.get("check.php?x="+x+"&y="+y, function(answer){
$("#res").prepend(answer+"\n");
});
}
</script>
</head>
<body>
<h1>Find cell...</h1>
<h2>(Refresh site to start again.)</h2>
<table>
<?php
session_start();
for($j=0;$j<10;$j++){
echo "<tr>";
for($i=0;$i<10;$i++){
echo "<td onclick='check(".$j.",".$i.");'>".($j*10+($i+1))."</td>";
}
echo "</tr>";
}
$_SESSION["rx"]=rand(0,9);
$_SESSION["ry"]=rand(0,9);
$_SESSION["p"] = 0;
?>
</table>
<br>
<form method="GET">
<textarea rows="30" cols="50" id="res" style="overflow:scroll;"></textarea>
</form>
</body>
<html>
check.php文件：
<?php
if(isset($_GET["x"]) && isset($_GET["y"])){
session_start();
$_SESSION["p"]++;
if($_GET["x"] == $_SESSION["rx"] && $_GET["y"] == $_SESSION["ry"]){
echo "Victorious after ".$_SESSION["p"]." tries.";
}
else{
$distance = sqrt(($_SESSION["rx"]-$_GET["x"])*($_SESSION["rx"]-$_GET["x"])+($_SESSION["ry"]-$_GET["y"])*($_SESSION["ry"]-$_GET["y"]));
echo intval($distance);
}
}
?>
答案 0 :(得分：0)
使用on-click事件添加具有不同颜色的css类。
答案 1 :(得分：0)
你碰巧想要像this这样的东西吗？
<h1>Find cell...</h1>
<h2>(Refresh site to start again.)</h2>
<table>
<tbody>
<tr>
<td data-j="0" data-i="0">1</td>
<td data-j="0" data-i="1">2</td>
</tr>
<tr>
<td data-j="1" data-i="0">3</td>
<td data-j="1" data-i="1">4</td>
</tr>
</tbody>
</table>
<br>
<form method="GET">
<textarea rows="30" cols="50" id="res" style="overflow:scroll;"></textarea>
</form>
var correctJ = 1; // Cell #3
var correctI = 0; // Cell #3
$("td").click(function() {
if ($(this).attr('data-j') == correctJ && $(this).attr('data-i') == correctI) {
$(this).css("background-color", "green");
} else {
$(this).css("background-color", "red");
}
});