使用 Javascript 根据正文隐藏元素 class

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>

所以我想隐藏 class .button-wrapper 如果在网页上找到文本 "rural communities" ，或者类似地，如果 class .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');

此函数将return 具有button-wrapper class 的元素集合。如果文档中存在任何其他带有 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 永远不会等于 'rural communities' 因为 innerHTML 实际上会像 'a class="...rural communities...span>../a>'

认为你应该选择 indexOf 而不是：

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';
    }
}

使用 Javascript 根据正文隐藏元素 class

Using Javascript to hide element class based on body text

html

javascript

jquery

hide

display