时间戳

首页 > 解决方案 > 获取选中的 contenteditable 类，动态生成 contenteditables

javascript - 获取选中的 contenteditable 类，动态生成 contenteditables

问题描述

我用 HTML、CSS 和 JavaScript 创建了一个数独网格。用户可以输入任何 81 个动态生成的单元格（内容可编辑的 div）。

每个单元格都有一个 class"cell"和一个 class "cell" + number of the cell。
例如，第一个单元格有 class = "class class1"，第二个"class class2"，...

但我需要一个返回所选单元格索引的函数。
例如在这里 我希望函数返回0

在这里 我希望函数返回80

这是我的 HTML

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
        <link rel = "stylesheet" href = "sudoku.css" type = "text/css">
        <script src = 'https://code.jquery.com/jquery-3.4.1.min.js' type = "text/javascript"></script>
        <script src = "sudoku.js"></script>
        <title>Sudoku</title>
    </head>
    <body onload = "load(); draw()">
        <h1>Sudoku</h1>
        <div class = "board"></div>
    </body>
</html>

这是js文件的一部分

let bo = [];
for(let i = 0; i < num ** 2; i++) {
    bo.push("0")
}

// Redrawing Grid and Numbers
function draw() {
    $(".board").remove();
    let b = document.createElement("div");
    b.className = "board";
    document.body.appendChild(b)
    document.getElementsByClassName("board").innerHTML = "";
    // Drawing Cells
    for (let i = 1; i <= num ** 2; i++) {
        // Draw Cell
        let element = document.createElement("div");
        element.className = "cell cell" + i.toString();
        element.contentEditable = "true";
        element.setAttribute("onkeydown", "limit()")

        // Adding content
        let content;
        if (bo[i - 1] == "0") {
            content = document.createTextNode("");
        } else {
            content = document.createTextNode(bo[i - 1]);
        }
        element.appendChild(content);
        let div = document.getElementsByClassName("board")[0];
        div.append(element);
    }
}

// Update Cells
function save() {
    for (let i = 0; i < num ** 2; i++) {
        let c = document.getElementsByClassName("cell")[i];
        if (c.innerHTML == "") {
            bo[i] = "0";
        } else {
            bo[i] = c.innerHTML;
        }
    }
}


// Refreshing
document.addEventListener('keydown', function(e) {
    switch (e.key) {
        case "1":
        case "2":
        case "3":
        case "4":
        case "5":
        case "6":
        case "7":
        case "8":
        case "9":
            save();
            break;
        case "Backspace":
            draw();
            break;
        case "ArrowLeft":
        case "ArrowRight":
            break;
        default:
            save();
            draw();
    }
})

基本上我有一个功能，如果按下的键不是数字，则重绘网格并读取所有数字。但是按退格键，它不会删除单元格中的数字，所以我想知道使用 JavaScript 删除它的选定单元格是什么。

1周我在这个问题上，我在网上找不到任何解决方案。

标签： javascripthtmljquery

解决方案

如果你想让事情变得简单，不用担心，index只需给每个 div 一个 data 属性i。

element.setAttribute("data-index",i);

然后在您的onkeydown处理程序中，您将使用它来获取该值

index = element.getAttribute("data-index");

您可以使用 querySelector 引用特定元素：

index = 1;
el = document.querySelector("[data-index='" + index + "']");

推荐阅读