javascript - 使用Javascript根据正文隐藏元素类别

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

let divs = document.getElementsByClassName('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>