Как изменить класс CSS каждой метки на основе значения textContent

Question

У меня есть шаблон HTML с тегами jinja, которые динамически создают метки из списка объекта JSON. L oop, который создает это содержимое, выглядит следующим образом.

<div class="card mb-0">
    {% for turn in response %}
        <div class="card-header collapsed" data-toggle="collapse" data-target="#collapse{{turn['turn_id']}}" href="#">
            <a class="card-title"> {{turn['author_name']}} {{turn['date_time']}} </a>
            </div>
                  <div id="collapse{{turn['turn_id']}}" class="card-body collapse in" >
                       <ul>
                            {% for sent in turn['list_of_sentences'] %}
                                <li>{{sent['text']}}</li>
                                {% for tag in sent['tags'] %}
                                    <label><span class="badge" id="{{tag}}">{{ tag }}</span></label>
                                {% endfor %}
                            {% endfor %}
                       </ul>
                  </div>
    {% endfor %}
</div>

У меня есть функция javascript, которая изменяет класс css на основе идентификатора метки, потому что я назначил textContent метки для идентификатора .

$(window).on('load', change_label_css );

function change_label_css(){
    console.log("Changing CSS classes");
    if (document.getElementById("OT").textContent === "OT"){
        console.log(document.getElementById("OT").textContent);
        document.getElementById("OT").className = "badge badge-warning";
    }
    if(document.getElementById("RES").textContent === "RES"){
        console.log(document.getElementById("RES").textContent);
        document.getElementById("RES").className = "badge badge-success";
    }
    if(document.getElementById("DES").textContent === "DES"){
        console.log(document.getElementById("DES").textContent);
        document.getElementById("DES").className = "badge badge-light";
    }
    if(document.getElementById("CW").textContent === "CW"){
        console.log(document.getElementById("CW").textContent);
        document.getElementById("CW").className = "badge badge-info";
    }
    if(document.getElementById("Org").textContent === "Org"){
        console.log(document.getElementById("Org").textContent);
        document.getElementById("Org").className = "badge badge-primary";
    }
    if(document.getElementById("QT").textContent === "QT"){
        console.log(document.getElementById("QT").textContent);
        document.getElementById("QT").className = "badge badge-primary";
    }
    if(document.getElementById("URL").textContent === "URL"){
        console.log(document.getElementById("URL").textContent);
        document.getElementById("URL").className = "badge badge-secondary";
    }
    else if(document.getElementById("C").textContent === "C"){
        console.log(document.getElementById("C").textContent);
        document.getElementById("C").className = "badge badge-dark";
    }
    console.log("End of changing CSS classes");
}

Не думаю, что это правильная логика c, так как у меня есть ярлыки с разными идентификаторами и похожими идентификаторами.

Я хотел бы предложить, как пройти через каждую метку и изменить класс CSS на основе textContent.

Answer 1

Вы можете создать объект, содержащий все метки и соответствующие им классы:

const labelClassMap = {
    "OT": "badge badge-warning",
    "RES": "badge badge-success"
    ...
}

Затем переберите все соответствующие метки, чтобы все метки, классы которых должны быть установлены, и установите их значения класса, сравнивая textContent с картой, которую вы только что создали.

for(let label of document.querySelectorAll("label" /*You may adjust the selector here*/)){
   label.classList.add(...labelClassMap[label.textContent].split(" "))
}