Готовый JavaScript для одновременного показа / скрытия нескольких элементов

Question

У меня есть текст на HTML-странице.

Я хочу пометить части речи, такие как прилагательные (например, span class = "adj"), и использовать vanilla JS, чтобы переключать видимость каждой части речи с помощью кнопок со скрытым или отображаемым: ни одного в качестве исходного состояния.

На странице может быть несколько вхождений каждой части речи, и все экземпляры определенной части речи (например, «adj») должны появляться одновременно при нажатии кнопки. Они будут показаны в строке.

Я пытаюсь найти какой-нибудь простой готовый Javascript для достижения того, чего я хочу. Я не знаю Javascript, но я могу делать простые вещи, такие как заполнение категорий (например, указав класс как «существительное1» или «существительное2»). Предпочтительно я не хочу указывать каждое вхождение как отдельное событие.

Это похоже на цель, основанную на здравом смысле, но, кажется, ни один ресурс не решает ее. W3schools смешен (привязан к id, поэтому только один элемент за раз). Некоторые ресурсы дают ошибочные решения, содержащие старую проблему «двойного щелчка» (изначально нужно щелкнуть дважды). Многие из них связаны с очень конкретными случаями или требуют знания JS и массивов. Я не нашел ничего, что могло бы достичь того, что я хочу, то есть одним щелчком мыши, и все (помеченные) прилагательные, существительные и т. Д. Появляются в виде фрагмента текста. Я спрашиваю о невозможном?

Answer 1

Это довольно просто. Я думаю, что понимаю вашу потребность. Одна кнопка для каждой части речи, которая показывает слова в тексте этой части речи.

Ключ, как вы указали, состоит в том, чтобы поместить содержимое в промежутки. Затем, используя data- Атрибуты мы можем однозначно идентифицировать каждую часть. Наконец, переключите класс, который скрывает или показывает содержимое.

Обратите внимание, что я использовал свойство CSS visibility вместо display. Причина в том, что visibility сохраняет занимаемое пространство, даже если содержимое не видимое . Похоже, это лучше подходит вашему варианту использования, чем удаление, как display.

РЕДАКТИРОВАТЬ: Вот решение в поршень

document.querySelector('.container').addEventListener('click', highlight);

function highlight(e) {
  document.querySelectorAll(`[data-part=${e.target.dataset.activate}]`).forEach(el => el.classList.toggle('hidden'));
}

.hidden {
  visibility: hidden;
}

<div class="container">
  <button data-activate="adj">Adjectives</button>
  <button data-activate="noun">Nouns</button>
  <button data-activate="verb">Verbs</button>
</div>

<p>The <span data-part="noun" class="hidden">dog</span> <span data-part="verb" class="hidden">jumped</span> over the <span data-part="adj" class="hidden">bright</span> <span data-part="noun" class="hidden">moon</span>.</p>
<p>The <span data-part="adj" class="hidden">beautiful</span> <span data-part="noun" class="hidden">rose</span> <span data-part="verb" class="hidden">wept</span>.</p>

Answer 2

Что-то в этом роде?

const Bt_toM = document.querySelector('#bt-to-M')
,     Bt_toV = document.querySelector('#bt-to-V')
,     Bt_toS = document.querySelector('#bt-to-S')
,     ElmsTo = document.querySelectorAll('span.word-to')
;
/*
Bt_toM.onclick =_=>{
  ElmsTo.forEach(e=>{
    e.classList.remove('noVisu')
    e.classList.remove('Show_hide')
    e.classList.toggle('magnify')
  })
}
*/
Bt_toV.onclick =_=>{
  ElmsTo.forEach(e=>{
//    e.classList.remove('magnify')
//    e.classList.remove('Show_hide')
    e.classList.toggle('noVisu')
  })
}
/*
Bt_toS.onclick =_=>{
  ElmsTo.forEach(e=>{
    e.classList.remove('noVisu')
    e.classList.remove('magnify')
    e.classList.toggle('Show_hide')
  })
}
*/

.magnify   { color: red; background-color: aqua}
.noVisu    { visibility: hidden }
.Show_hide { display: none }

<p>I am trying <span class="word-to noVisu">to</span> find some simple off-the-shelf Javascript <span class="word-to noVisu">to</span> achieve what I want.
I know no Javascript but I can do simple things like filling in categories (e.g. specifying the class as "noun1" or "noun2"). 
Preferably I do not want <span class="word-to noVisu">to</span> specify each occurrence as a separate event.</p>

<p>This seems like a commonsense kind of goal but not a single resource seems <span class="word-to noVisu">to</span> address it. 
W3schools is laughable (tied <span class="word-to noVisu">to</span> id, so only one element at a time). 
Some resources give faulty solutions containing the old 'double-click' issue (initially you have <span class="word-to noVisu">to</span> 
click twice). Many are tied <span class="word-to noVisu">to</span> very specific cases, or require knowledge of JS and arrays. I have found 
nothing that would achieve what I want, that is, one click and all the (tagged) adjectives, nouns, etc. 
in a stretch of text appear. Am I asking the impossible?</p>
<hr>
<!--<button id="bt-to-M">magnify "to" on/off </button> -->
<button id="bt-to-V">Visualize "to" on/off </button>
<!--<button id="bt-to-S">Show/hide "to" </button>  -->

Answer 3

Я вижу, вы новичок здесь,

эта функция javascript возвращает все элементы с именем класса в виде массива

var elements = Document.getElementsByClassName("class");

предполагая, что все прилагательные, которые вы хотите выделить, имеют одинаковые классы, вы можете использовать цикл for для циклического прохождения всех элементов и установки стиля

function buttonClick() {
    var elements = Document.getElementsByClassName("class");
    for (var i = 0; i < element.length; i++) {
        elements[i].style.opacity = 1;
    }
}