我正在用JavaScript开发数独游戏，我需要一些鼠标事件的帮助。我希望用户能够将鼠标悬停在正方形上，然后正方形可以更改颜色。我还希望用户能够单击一个正方形，然后突出显示整个行，列和象限。现在，它们中的任何一个都可以工作，但不能同时工作。当单击时，我希望用户仍然能够将鼠标悬停在其他正方形上，而不会覆盖click事件。
const rainbow = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
const [red,, yellow, ...otherColors] = rainbow;
console.log(otherColors); // ['green', 'blue', 'indigo', 'violet']
"use strict";
let table = "<table>"; //initialize a table tag
let q = 1; // a counter for quadrants
let puzzle1 = [ [ 0, 0, 4, 0, 0, 0, 0, 6, 7 ],
[ 3, 0, 0, 4, 7, 0, 0, 0, 5 ],
[ 1, 5, 0, 8, 2, 0, 0, 0, 3 ],
[ 0, 0, 6, 0, 0, 0, 0, 3, 1 ],
[ 8, 0, 2, 1, 0, 5, 6, 0, 4 ],
[ 4, 1, 0, 0, 0, 0, 9, 0, 0 ],
[ 7, 0, 0, 0, 8, 0, 0, 4, 6 ],
[ 6, 0, 0, 0, 1, 2, 0, 0, 0 ],
[ 9, 3, 0, 0, 0, 0, 7, 1, 0 ] ];
// c = row and r = column. I don't know how that happened
for (let c = 0; c < puzzle1.length; c++) // a for loop for a 2D array - this is the rows
{
table += "<tr id='row-" + (c+ 1) + "'>"; //set up the rows
for (let r = 0; r < puzzle1[0].length; r++) // this is the column
{
/* Quadrant
1 2 3 |
4 5 6 |
7 8 9 |
----------
*/
//trying to sort out the quadrants
if (c < 3 && r < 3) q = 1;
else if (c < 3 && r < 6) q = 2;
else if (c < 3 && r < 9) q = 3;
else if (c < 6 && r < 3) q = 4;
else if (c < 6 && r < 6) q = 5;
else if (c < 6 && r < 9) q = 6;
else if (c < 9 && r < 3) q = 7;
else if (c < 9 && r < 6) q = 8;
else if (c < 9 && r < 9) q = 9;
// add a table cell and give it an id with the row, column, quadrant, and number stored inside
table += "<td id='row-" + (c + 1) + "col-" + (r + 1) + "quad-" + q + "num-" + puzzle1[c][r] + "'>";
if (puzzle1[c][r] != 0) // 0 = empty cell
table += puzzle1[c][r] // this is going through a 2D array in another file and adding the numbers in if they are not 0
else // if the cell is empty then add an input box
table += "<input class='empty' maxlength='1' id='row-" + (c + 1) + "col-" + (r + 1) + "quad-" + q + "'>";
table += "</td>"
}
table += "</tr>"
}
table += "</table>";
//add the table to the html file
document.getElementById("board").innerHTML = table;
let clicked = false;
/*
window.onload = init;
function init(e) {
}
*/
// gather up all of the table cells
var cell = document.getElementsByTagName("td");
//assign the events and the procedures
for (let i = 0; i < cell.length; i++) {
cell[i].onclick = highlight;
cell[i].onmouseover = hover;
}
// create a variable that holds the style tag
let cellStyle = document.getElementById("highlight");
function highlight(e) { //highlight the entire 3x3 block and the row and col
/*
1 2 3
1 * * *
2 * * *
3 * * *
*/
// row-xcol-yquad-znum-c
// gather the id assigned to each table cell and then organize them in appropriate variables
let cellID = e.target.id;
let cellRow = cellID.substring(0, 5);
let cellCol = cellID.substring(5, 10);
let quadrant = cellID.substring(10, 16);
let cellNum = cellID.substring(16)
let s = ""; //style variable
// highlight colors
s += "td[id*='" + cellRow + "'], input[id*='" + cellRow + "'] {background-color: #E2E7ED;}";
s += "td[id*='" + cellCol + "'], input[id*='" + cellCol + "'] {background-color: #E2E7ED;}"
s += "td[id*='" + quadrant + "'], input[id*='" + quadrant + "'] {background-color: #E2E7ED;}";
s += "td#" + cellID + ", input#" + cellID + "{background-color: #BBDEFB;}";
s += "td[id*='" + cellNum + "'] {background-color: #CBDBED;}";
cellStyle.innerHTML = s;
console.log(cellRow + " " + cellCol + " " + quadrant + " " + cellNum);
clicked = !clicked;
}
function hover(e) // highlight the cell that the mouse is hovering over
{
let cellID = e.target.id;
let x = "";
x += "td#" + cellID + ", input#" + cellID + "{background-color: #BBDEFB;}";
cellStyle.innerHTML = x;
}
这是CSS部分。
<!DOCTYPE html>
<html>
<head>
<title>Sudoku</title>
<script src="puzzle.js" defer></script>
<script src="game.js" defer></script>
<link href="style.css" rel="stylesheet" />
<style id="highlight">
</style>
</head>
<body>
<div id="board"></div>
<div id="buttons"></div>
</body>
</html>答案 0 :(得分：2)
您可以使用css https://www.w3schools.com/csSref/sel_hover.asp来设置悬停样式 并将活动类添加到每当用户单击列时需要突出显示的所有列。
const $col = $('.col');
$col.hover(event => $col.removeClass('active'));
$col.on('click', event => {
const col = $(event.target).data('col');
const row = $(event.target).data('row');
$col.removeClass('active');
$(`[data-col="${col}"]`).addClass('active');
$(`[data-row="${row}"]`).addClass('active');
});.col {
border: 1px solid #000;
width: 20px;
height: 20px;
display: inline-block;
background-color: white;
}
.col:hover {
background-color: grey;
}
.col.active {
background-color: grey;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table">
<div class="row row-1">
<div class="col col-1" data-row="1" data-col="1"></div>
<div class="col col-2" data-row="1" data-col="2"></div>
<div class="col col-3" data-row="1" data-col="3"></div>
</div>
<div class="row row-2">
<div class="col col-1" data-row="2" data-col="1"></div>
<div class="col col-2" data-row="2" data-col="2"></div>
<div class="col col-3" data-row="2" data-col="3"></div>
</div>
<div class="row row-3">
<div class="col col-1" data-row="3" data-col="1"></div>
<div class="col col-2" data-row="3" data-col="2"></div>
<div class="col col-3" data-row="3" data-col="3"></div>
</div>
</div>