动态突出显示文本<li>基于选中的复选框

Question

I have a webpage that generate <li> from a Json object passed from a flask app route. I have a set of checkboxes generated dynamically from the same Json object. What I wanted to do is highlight the words in the <li> text ... </li> if there is a match to any checked checkbox.

This what I have done so far.

Java script to capture checked checkboxes and find matches in <li>

$(".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 to highlight

.highlight{
    background: yellow;
}

HTML template with jinja tags

...
<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>
...

I did a sanity check to see whether I get the list of checked checkboxes. The console displays IDs, so that part worked. But I don't see the highlighting of text regardless of checkboxes are checked.

Side note: I also see the following error in JS console. ReferenceError: func1 is not defined

Answer 1

1) You have a typo here: item.classList.add("highlist") - should be highlight correct?

2) onclick="func1()" this is causing your func1 is not defined , just remove it.

3) I don't know if that's the case, but $(".topic-check").change won't work on dynamically added HTML. You need something like $(".card-body").on("change", ".topic-check", function)

4) You should store new RegExp(chkTopicIDs.join("|")) as a variable outside the loop for increased performance