javascript - 如果多个单词重叠，它们将无法正确切换

Question

我使用 CSS 和 Javascript 创建了一个关键字切换按钮。

◆ WORD 切换按钮 Javascript

var DIVS = document.querySelectorAll(`.ClapLv2ListItem_Chie-ListItem__Anchor__347mo, .ListSearchResults_listSearchResults__listItem__F0427, 
.ClapLv2QARankingItem_Chie-QARankingItem__Anchor__2S_YM`);

var WORDS = [
    'Safari', 'Macintosh', 'iPhone',
];


//----- Set default state -----//

window.addEventListener('load', l => {
    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';

            }
        }
    }


    //----- Insert HTML (toggle button generation) -----//
    let sort_label =
        document.querySelector("#sort > div.ClapLv2Sort_Chie-Sort__Select__anKwT > div > label");
    sort_label.insertAdjacentHTML('afterend', `
    <div class="sample_switch" id="makeImg">
      <input type="checkbox" id="toggle_check" checked=""/>
        <label for="toggle_check" onclick="Toggle_Switch()" >
          <span></span>
        </label>
    </div>
    `);
});


//----- Switching processing setting when the toggle button is pressed -----//

function Toggle_Switch() {
    for (let i = 0; i < DIVS.length; i++) {
        for (let j = 0; j < WORDS.length; j++) {
            if (DIVS[i].innerHTML.match(WORDS[j])) {
                if (DIVS[i].style.display == "none") {

                    DIVS[i].style.display = "block";
                } else {

                    DIVS[i].style.display = "none";
                }
            }
        }
    }
}

◆ WORD 切换按钮 CSS

.sample_switch {
    zoom: 70%;
    left: 0.5px;
    bottom: 230px;

    position: fixed;
}


.sample_switch input[type = "checkbox"] {
        display: none;
    }


    .sample_switch label {
        display: block;
        box-sizing: border-box;
        text-align: center;
        border: 2px solid #ccc;
        border-radius: 3px;

        height: 50px;
        line-height: 50px;

        font-weight: bold;
        width: 45px;
        font-size: 22px;

        background: #eee;
        box-shadow: 3px 3px 6px #888;   
      transition     : .3s;               
    
    cursor: pointer;
    }
     
    
    .sample_switch label span:after{
      content        : "CL";    /*"close"*/
      color          : #aaa;

    }
    .sample_switch #toggle_check: checked + label {
        background: #78bd78;        
    /*  box-shadow     : none;  */       
    }
    .sample_switch # toggle_check: checked + label span: after {
                content: "OP"; /*"OPEN"*/
                color: #fff;
            }


            .sample_switch: active {
                height: 48px;
                margin-top: -2px;
                transition: none;
            }

我选择关键字是因为我认为它很容易解释，而不是在这样的环境中。没有其他意义。

使用左侧的绿色按钮切换灰色元素。对于 DELL 的 Chrome 浏览器，它旨在通过将缩放系数设置为 150% 来适应页面。

由于尝试切换关键词，在单个单词的情况下，切换正常。

问题是如果指定的单词重叠，它似乎没有正确切换。

例如，如果目标元素包含单个iPhone，您可以在它们之间切换。

但，

iPhone+Safari等。如果元素包含多个指定的单词，则不能切换。

目标页面（日本最大的问答网站）

https://chiebukuro.yahoo.co.jp/category/2080401334/question/list?sort=16

https://chiebukuro.yahoo.co.jp/category/2080401478/question/list?sort=16

https://chiebukuro.yahoo.co.jp/category/2080401523/question/list?sort=16

我想解决多个单词重叠时无法正确切换的问题，我该怎么办？

请告诉我。

标签： javascripthtmljquerycss