Question

我正在创建一个动态生成的html网格，其中包含以下javascript代码和html：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="./css/colorwalk.css">
</head>
<body>
    <div>
        <div id="colorgrid"></div>
    </div>
    <div id="colorbuttons">
        <button class="buttonsize white">
        <button class="buttonsize red">
        <button class="buttonsize green">
        <button class="buttonsize orange">
        <button class="buttonsize pink">
        <button class="buttonsize purple">
    </div>
    <script src="js/main.js"></script>
</body>

$(document).ready(function() {
    const colors = Array.of('red', 'green', 'orange', 'pink', 'purple');
    let y = 0;
    let x = 0
    for (let i = 0; i < 20; i++) {
        for (let j = 0; j < 30; j++) {
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            $block = $('<div></div>').addClass('blockattribute').addClass(randomColor).css({ left: x, top:y });
            $block.appendTo('#colorgrid');
            x >= 580 ? x = 0 : x = x + 20
            $('.blockattribute').first().addClass('gray');
        }
        y = y + 20;
    }
});

我遇到的问题是JS代码段（$('.blockattribute').first().addClass('gray');）中的第11行。我希望网格上的第一个块具有.gray类。该类使背景颜色变为灰色，但是当我在控制台中检查元素时，我看到我的块看起来像这样：

<div class="blockattribute red gray" style="left: 0px; top: 0px;"></div>

我的问题是我需要删除red类，但因为它是动态创建的，所以我无法事先选择它。有没有办法可以看到一个jQuery类列表，然后选择正确的类？

Answer 1

您可以在添加gray之前删除所有其他颜色类，如下所示

$('.blockattribute').first().removeClass(colors.join(' ')).addClass('gray');

如何使用jQuery删除动态生成的类？

1 个答案: