AJAX - 实时 CSS 样式问题

Question

我有一个 HTML 文件，它使用 PHP 在表中生成一个 DB 条目列表。该列表通过使用 JS-DOM 并对我的 PHP 后端发出 XMLHttpRequest 进行行标识。 在那里我决定哪种颜色作为响应。当它被响应时，颜色由

设置

if (this.readyState === 4 && this.status === 200) {                                         
    document.getElementById("artikel' . $row['id'] . '").style.color = this.responseText;                                                    
}

问题是：

只有在以下情况下才能正确设置/更改颜色

1) 我正在刷新页面 -> 在 AJAX 的 PHP 后端中出现新数据库条目的原因

2) 我至少点击了 2 次​​p>

有什么问题？

这是生成条目的代码

<?php
foreach ($dataOfDBselect as $row) {

$color = "";
if ($row['status'] == "false") {
    $color = "#130f40";
} else {
    $color = "#badc58";
}

echo '<tbody class="table-text-small" id="artikel' . $row['id'] . '" style="color: ' . $color . ';">
<th class="text-table table-inner-big">' . $row['name'] . '</th>
<th class="table-inner-big text-table">' . $row['amount'] . '</th>

<th class="table-inner-big text-table"><i class="far fa-check-square" id="checkArtikel_' . $row['id'] . '"></i></th>
</tbody>
<script>
    document.getElementById("artikel' . $row['id'] . '").addEventListener("click", function () {
        let request = new XMLHttpRequest();
        request.open("GET", "./core/handler_ArtikelChecked.php?f_identify=' . $row['id'] . '");

        request.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                document.getElementById("artikel' . $row['id'] . '").style.color = this.responseText;                                                    
            }
        };
        request.send();

    });
</script>';
}
?>

这就是我的 PHP 后端正确返回到我的网站的内容

echo $toColor; 类似于$toColor = "#badc58";

Answer 1

看起来您正在将 Javascript 和 PHP 混合在一起。您的 if 语句是 Javascript，但在 document.getElementById("artikel' . $row['id'] . '").style.color = this.responseText; 中，您试图将 id 与值 $row['id'] 连接起来，该值在您的 php 脚本中的某个位置定义？