在 insertAdjacentHTML 之后更改类名答案

【问题标题】：Changing className after insertAdjacentHTML在 insertAdjacentHTML 之后更改类名
【发布时间】：2020-05-29 20:26:36
【问题描述】：

我正在尝试在 insertAdjacentHTML() 函数之后更改我的 className。我为此使用 AJAX 请求，路由 /reviewcombine 来自我的后端 JavaScript 代码。

我的代码：

<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        .checked {
            color: orange;
        }
    </style>
    <script>
        function getTestByID() {
            var request = new XMLHttpRequest();

            //The "/reviewcombine" here is the route from my backend JavaScript
            request.open("GET", "/reviewcombine", true);
            request.setRequestHeader("Content-Type", "application/json");
            request.onload = function () {
                var tests = JSON.parse(request.responseText);

                var exampleID = 1
                var totalTests = tests.length;

                var testlistings = document.getElementById("testListings");

                for (var testCount = 0; testCount < totalTests; testCount++) {

                    if (tests[testCount].reviewResId == exampleID) {

                        var username = tests[testCount].username;
                        var rating = tests[testCount].rating;

                        var testItem = '<div class="eachtest">\
                                    <h5 style="padding:6px; background-color: #E1ECF4; display: inline-block">@'+ username + '</h5>\
                                    <div style="margin-top: 1px; padding-left: 3px;">\
                                        <p style="color: rgb(255, 136, 0); font-size: 16px; display: inline;">'+ rating + '</p>&nbsp;\
                                        <span class="fa fa-star" id="test_1"></span>\
                                        <span class="fa fa-star" id="test_2"></span>\
                                        <span class="fa fa-star" id="test_3"></span>\
                                        <span class="fa fa-star" id="test_4"></span>\
                                        <span class="fa fa-star" id="test_5"></span>\
                                        &nbsp;\
                                    </div>\
                                </div>';

                        // insertAdjacentHTML() to insert the HTML codes.                  
                        testlistings.insertAdjacentHTML('beforeend', testItem);

                        //cant change after insertAdjacentHTML????????????????????
                        var star = tests[testCount].rating

                        if (star == 0) {
                            return;
                        }
                        else if (star == 1) {
                            document.getElementById('test_1').className = "fa fa-star checked"
                        }
                        else if (star == 2) {
                            document.getElementById('test_1').className = "fa fa-star checked"
                            document.getElementById('test_2').className = "fa fa-star checked"
                        }
                        else if (star == 3) {
                            document.getElementById('test_1').className = "fa fa-star checked"
                            document.getElementById('test_2').className = "fa fa-star checked"
                            document.getElementById('test_3').className = "fa fa-star checked"

                        }
                        else if (star == 4) {
                            document.getElementById('test_1').className = "fa fa-star checked"
                            document.getElementById('test_2').className = "fa fa-star checked"
                            document.getElementById('test_3').className = "fa fa-star checked"
                            document.getElementById('test_4').className = "fa fa-star checked"
                        }
                        else {
                            document.getElementById('test_1').className = "fa fa-star checked"
                            document.getElementById('test_2').className = "fa fa-star checked"
                            document.getElementById('test_3').className = "fa fa-star checked"
                            document.getElementById('test_4').className = "fa fa-star checked"
                            document.getElementById('test_5').className = "fa fa-star checked"
                        }
                    }
                }
            }
            request.send();
        }
    </script>
</head>

<body onload="getTestByID()">
    <div id="testListings"></div>

</body>

</html>

在这里，我正在尝试将我的星星更改为橙色并根据ratings 值显示它。

但是，在 insertAdjacentHTML 函数之后执行此操作只会永久更改类名。随后的循环使用fa fa-star checked 类而不是它们应该使用的fa fa-star 类。（在insertAdjacentHTML函数之前做也是不行的）

这是我得到的输出示例：

有人可以帮我找出这里的错误吗？任何相关的来源也将是一个很大的帮助。非常感谢！

【问题讨论】：

我修好了！我没有在if-else 中分配className，而是在其中调用var testItem，并在if-else 结束后执行insertAdjacentHTML。

标签： javascript html css insertadjacenthtml

【解决方案1】：

在循环中，您正在分配一个硬编码的 id：

<span class="fa fa-star" id="test_1"></span>

document.getElementById('test_1") 只会返回它的第一个实例，因为 id 应该是唯一的。尝试动态生成 id。

【讨论】：