Использование Javascript для скрытия класса элемента на основе основного текста - PullRequest
Новая
       18

Использование Javascript для скрытия класса элемента на основе основного текста

0 голосов
/ 29 июня 2019

У меня есть динамически генерируемая страница, которая изменяет содержимое в зависимости от того, вошел ли пользователь в систему или нет.

Таким образом, есть некоторые элементы, которые я хотел бы скрыть, основываясь на тексте в теле веб-страницы.

Пример 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';
    }
}

Большое спасибо заранее за вашу помощь!

Ответы [ 2 ]

1 голос
/ 30 июня 2019

let divs = document.getElementsByClassName ('button-wrapper');

Эта функция вернет коллекцию элементов с классом кнопки-обертки. Следует коду, который будет скрывать этот div, если в документе есть какой-либо другой div с wv-signupnotice. Надеюсь, это поможет. 

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>
0 голосов
/ 30 июня 2019

innerHTML, который вы получаете в вашем случае, никогда не будет равен «сельским общинам», так как innerHTML на самом деле будет что-то вроде «a class =" ... сельских сообществ ... 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';
    }
}
...