Изменение className после insertAdjacentHTML - PullRequest
Новая
       52

Изменение className после insertAdjacentHTML

2 голосов
/ 14 февраля 2020

Я пытаюсь изменить свое имя класса после функции insertAdjacentHTML(). Я использую запрос 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 просто постоянно меняет classNames. Последующие циклы используют класс fa fa-star checked вместо класса fa fa-star, который они должны использовать. (Выполнение этого до функции insertAdjacentHTML также невозможно)

Это пример вывода, который я получаю:

enter image description here

Может кто-нибудь помочь мне определить, в чем здесь ошибка? Любые соответствующие источники также будут большой помощью. Большое спасибо!

1 Ответ

0 голосов
/ 14 февраля 2020

Внутри l oop вы назначаете жестко запрограммированный идентификатор: 

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

document.getElementById('test_1") будет возвращать только первый его экземпляр, поскольку идентификатор должен быть уникальным. Попробуйте сделать идентификатор динамически.

...