使用JavaScript根据body文本隐藏元素类

Question

我有一个动态生成的页面，该页面更改内容取决于用户是否已登录。

因此，我想根据网页的正文中的文字隐藏一些。

示例html：

    <div class="button-wrapper">
         <a class="button-1" href="/upload" id="button-pop">
              <span class="button-text">Upload New Product</span>
         </a>
    </div>
    <div class="wv-signupnotice">
         <h3>Sign up to start learning</h3>
              <p>Help children in rural communities</p>     
    </div>

所以我想隐藏类 .button-wrapper如果在网页上找到"乡村社区"，或类似地，如果存在.wv-signupnotice。

这是我试图无效的JavaScript：

let divs = document.getElementsByClassName('button-wrapper');
for (let x = 0; x < divs.length; x++) {
    let div = divs[x];
    let content = div.innerHTML.trim();
    if (content == 'rural communities') {
        div.style.display = 'none';
    }
}

非常感谢您的帮助！

Answer 1

让Divs = document.getElementsByClassName('button-wrapper'(;

此功能将返回使用Button-wrapper类的元素集合。遵循该代码，如果文档中存在任何其他带有WV-Signupnotice的DIV，则会隐藏此DIV。希望它有帮助。

let divs = document.getElementsByClassName('button-wrapper');
$(document).ready(function() {
if($('div').hasClass("wv-signupnotice"))
divs[0].style.display="none";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-wrapper">
         <a class="button-1" href="/upload" id="button-pop">
              <span class="button-text">Upload New Product</span>
         </a>
    </div>
    <div class="wv-signupnotice">
         <h3>Sign up to start learning</h3>
              <p>Help children in rural communities</p>     
    </div>

Answer 2

您在您的情况下要检索的innerhtml永远不会等于'农村社区'> ../a>'

认为您应该去索引：

let divs = document.getElementsByClassName('button-wrapper');
for (let x = 0; x < divs.length; x++) {
    let div = divs[x];
    let content = div.innerHTML.trim();
    if (content.indexOf('rural communities') > -1) {
        div.style.display = 'none';
    }
}