如何根据 textContent 值更改每个标签的 CSS 类

Question

我有一个带有jinja标签的 HTML 模板，可以从 JSON 对象中的列表动态创建标签。 创建该内容的循环如下。

<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 函数，它根据标签 ID 更改 css 类，因为我将标签的 textContent 分配给了 ID。

$(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");
}

我不认为这是正确的逻辑，因为我有不同 ID 和相似 ID 的标签。

我想要一个关于如何遍历每个标签并根据 textContent 更改 CSS 类的建议。

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(" "))
}