为什么包含多个单词的元素的切换过程不能正常工作？

问题描述

为什么具有多个重叠词的元素的切换过程不能正常工作？

var DIVs = document.querySelectorAll('li.test');
// document.querySelectorAll('div.test');
var WORDs = [
    'word_1','word_2','word_3','word_4','word_5',];

window.addEventListener('load',l => {

    // Check to see if it contains a particular keyword,then reduce the size,etc.
    for (let i = 0; i < DIVs.length; i++) {
        for (let j = 0; j < WORDs.length; j++) {
            if (DIVs[i].innerHTML.match(WORDs[j])) {
                DIVs[i].style.zoom = 0.4;
                DIVs[i].style.marginLeft = '30px';
                DIVs[i].style.backgroundColor = '#f5f5f5';
                DIVs[i].style.bottom = '-20px';
            }
        }
    }
    // Show / Hide with ENTER key
    window.addEventListener('keyup',(e) => {
        for (let i = 0; i < DIVs.length; i++) {
            for (let j = 0; j < WORDs.length; j++) {
                if (DIVs[i].innerHTML.match(WORDs[j])) {
                    if (e.which === 13) {
                        if (DIVs[i].style.display !== "block") {
                            DIVs[i].style.display = "block";
                        } else {
                            DIVs[i].style.display = "none";
                        }
                    }
                }
            }
        }
    });
});

上述写法可以进行切换处理，但是初始操作和包含重复词的元素的操作存在问题。

具体操作问题如下：

⓵ 只隐藏包含多个词的元素（包含多个词的元素之后不能切换）→ ⓶ 隐藏包含多个词的元素不变，只有一个词只隐藏包含的元素 → ⓷ 只显示单个词 → ⓶ 隐藏一个词 → ⓷ 只显示一个词 → ⓶ 隐藏一个词 → ⓷ → ⓶ → 重复

据我所知， “首先尝试使用 for 语句进行循环是错误的。”

在 DIV 循环中，

const count = WORDs.filter(worditem => DIVs[i].innerHTML.includes(worditem)).length;

我听说你可以通过用类似的东西替换它来正确切换，但即使故事是正确的，我也没有权力替换 for 语句。

我无法获得更多信息。

如何修复单数复数，是否可以统一不区分地进行切换处理？

请帮帮我。

后记：

美国日期 2021.4.26

我所在地区的日期是 2021.4.27

根据我国家的建议，我尝试了以下方法，但根本没有解决问题，只能缩短代码。

我首先怀疑这个故事是否正确。

和以前一样，

多个关键字和，

例子： word_1+word_2 、 word_2+word_3 、 word_1+word_2+word_3

使用单个关键字，

例如： word_1 、 word_2 、 word_3

每次切换过程都不同。

我想同时切换两种模式。

var DIVs = document.querySelectorAll('li.sample_list');
// document.querySelectorAll('div.sample_list');

var WORDs = [
    'word_1',];

DIVs.forEach((divs) => {
    WORDs.filter((word) => {
     // WORDs.forEach((word) => {  // WORDs.map((word) => {  // WORDs.flatMap((word) => {  //WORDs.reduce((word) => {
        if (divs.innerHTML.includes(word)) {
            divs.classList.add("mark");
        }
        window.addEventListener('keyup',(e) => {
            if (divs.innerHTML.includes(word)) {
                if (e.which === 13) { // ENTER key
                    if (divs.style.display == "block") {
                        divs.style.display = "none";
                    } else {
                        divs.style.display = "block";
                    }
                }
            }
        });
    });
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

for-loop javascript jquery keyword toggle