2

我正在尝试在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函数之前做也是不可能的）

这是我得到的输出示例：

在此处输入图像描述

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

4

1 回答 1

0

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

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

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

于 2020-02-14T03:36:51.387 回答