javascript - 根据选中的复选框动态突出显示 中的文本

Question

我有一个生成 <li> 的网页来自Json从 Flask 应用程序路由传递的对象。我有一组从相同的 Json 动态生成的复选框目的。我想做的是突出显示 <li> text ... </li> 中的单词如果与任何选中的复选框匹配。

这就是我到目前为止所做的。

用于捕获选中的复选框并在 <li> 中查找匹配项的 Java 脚本

$(".topic-check").change(function(){
    var chkTopicIDs = checkTopics();

    console.log(chkTopicIDs);

    list_items = document.querySelectorAll(".sent");

    for (item of list_items){
        var text = item.textContent;

        if (new RegExp(chkTopicIDs.join("|")).test(text)){
            item.classList.add("highlight");
        }
        else {
            item.classList.remove("highlight");
        }
    }
});

function checkTopics(){

    $checkbox = $('.topic-check');

    var chkArray = [];
    chkArray = $.map($checkbox, function(el){
        if(el.checked){return el.id}
    });

    return chkArray;
}

CSS 突出显示

.highlight{
    background: yellow;
}

HTML 模板 jinja标签

...
<ul>
    {% for sent in turn['list_of_sentences'] %}
        <li class="sent">{{sent['text']}}</li>
    {% endfor %}
</ul>
...
<div class="card-body">
    {% for topic in response['topics'] %}
    <div>
        <input type="checkbox" id="{{topic}}" class="topic-check" onclick="func1()" /> <label class="checkbox-inline" >{{ topic }}</label> <br/>
    </div>
    {% endfor %}
</div>
...

我进行了健全性检查，看看是否获得了已选中复选框的列表。控制台显示 ID，因此该部分有效。但无论是否选中复选框，我都看不到文本突出显示。

旁注:我还在 JS 控制台中看到以下错误。 ReferenceError: func1 is not defined

Answer 1

1) 您这里有一个拼写错误:item.classList.add("highlist") - 应该是highlight 正确吗？

2) onclick="func1()" 这会导致您的 func1 未定义，只需将其删除即可。

3) 我不知道情况是否如此，但是 $(".topic-check").change 不适用于动态添加的 HTML。您需要类似 $(".card-body").on("change", ".topic-check", function)

4) 您应该将 new RegExp(chkTopicIDs.join("|")) 存储为循环外部的变量，以提高性能