php 将CSS类仅应用于innerHTML元素一次

ilmyapht 于 2023-03-28 发布在 PHP

关注(0)|答案(1)|浏览(118)

我有2个文件：

data.php
page.php

php从sql数据库中获取一行并将其发送到page.php
在page.php中，我还有一个JS脚本，它通过 AJAX 接收此行，然后通过这个js脚本的innerHTML函数将此行动态添加到HTML表中。
当使用innerHTML动态添加行时，我还添加了一个css类，它会 Flink / Flink 添加的行。除了这样一个事实之外，如果我插入第2，3，4，...行，那么插入的前一行也会 Flink ，我如何在添加到表中时使它们独立 Flink ？
这是css类和动画

@keyframes flash {
            from {
                background-color: #ffab91;
            }

            to {
                background-color: none;
            }
        }

        .flash_animation {
            animation: flash 1s 1;
        }

这是JS函数

var html_part = document.getElementById("dynamic");
 html_part.innerHTML += "<tr id="flashing_row" class='flash_animation'><td>" + code + "</td><td>" +      name +"</td></tr>";

我希望id=“flashingrow”的tr独立应用于flash_animation类

php

来源：https://stackoverflow.com/questions/75834624/apply-css-class-to-an-innerhtml-element-only-once

1条答案

按热度按时间

kknvjkwl1#

在插入新的动画类之前，您应该从先前添加的行中删除该动画类
例如

var rows = document.querySelectorAll("#dynamic .flash_animation");
rows.forEach(function(row) {
  row.classList.remove("flash_animation");
});

演示：
x一个一个一个一个x一个一个二个一个x一个一个三个一个
P.S.多个HTML元素不能共享同一个ID（如果你添加了多个元素，那么你的行就是这种情况）--ID必须（不言而喻）是唯一的，所以我从代码中删除了它。

赞(0）回复(0）举报 2023-03-28

我来回答

php 将CSS类仅应用于innerHTML元素一次

1条答案

相关问题

热门标签

最新问答