可同时显示/隐藏多个元素的现成javascript

我在html页面上有文本

我想标记词性，例如形容词（例如span class=“adj”），并使用vanilla JS使用按钮切换每个词性的可见性，隐藏或显示：none作为初始状态

一个页面上的每个词性都会多次出现，而且一个特定词性的所有实例（例如“adj”）都应该在按下按钮时同时出现。它们将在线显示

我试图找到一些简单的现成Javascript来实现我想要的。我不知道Javascript，但我可以做一些简单的事情，比如填写类别（例如，将类指定为“noun1”或“noun2”）。最好不要将每次事件指定为单独的事件

---

这似乎是一个常识性的目标，但似乎没有一种资源能够解决它。W3schools是可笑的（与id相关，所以一次只有一个元素）。一些资源给出了包含旧的“双击”问题的错误解决方案（最初您必须单击两次）。很多都与非常特定的案例有关，或者需要了解JS和数组。我没有发现任何东西可以实现我想要的，也就是说，点击一下，所有的（标记的）形容词，名词等在一段文字中出现。我是在问不可能的事吗？

我看你是新来的

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

功能按钮单击（）{
var elements=Document.getElementsByClassName（“类”）；
对于（变量i=0；i

我看到你是新来的

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

功能按钮单击（）{
var elements=Document.getElementsByClassName（“类”）；
对于（变量i=0；i

这很简单。我想我理解你的需要。每个词性的单个按钮，显示该词性文本中的单词

正如您所指出的，关键是将内容放在跨距中。然后，使用

数据-

属性我们可以唯一地标识每个零件。最后，切换隐藏或显示内容的类

请注意，我使用了CSS属性

可见性

，而不是

显示

。原因是，即使内容不可见，

可见性

也会保留占用的空间。这似乎比像

display

那样删除更符合您的用例

编辑：

document.querySelector（“.container”）.addEventListener（'click'，highlight）；
功能突出显示（e）{
document.querySelectorAll（`[data part=${e.target.dataset.activate}]`）.forEach（el=>el.classList.toggle（'hidden'）；
}

。隐藏{
可见性：隐藏；
}

形容词
名词
动词
狗跳过明月

美丽的玫瑰哭了。

这很直截了当。我想我理解你的需要。每个词性的单个按钮，显示该词性文本中的单词

正如您所指出的，关键是将内容放在跨距中。然后，使用

数据-

属性我们可以唯一地标识每个零件。最后，切换隐藏或显示内容的类

请注意，我使用了CSS属性

可见性

，而不是

显示

。原因是，即使内容不可见，

可见性

也会保留占用的空间。这似乎比像

display

那样删除更符合您的用例

编辑：

document.querySelector（“.container”）.addEventListener（'click'，highlight）；
功能突出显示（e）{
document.querySelectorAll（`[data part=${e.target.dataset.activate}]`）.forEach（el=>el.classList.toggle（'hidden'）；
}

。隐藏{
可见性：隐藏；
}

形容词
名词
动词
狗跳过明月

美丽的玫瑰哭了。

是这样的吗

const Bt_toM=document.querySelector（“#Bt-to-M”）
，Bt#toV=document.querySelector（“#Bt-to-V”）
，Bt#u-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\u hide'）
e、 classList.toggle（'放大'）
})
}
*/
Bt_toV.onclick=>{
ElmsTo.forEach（e=>{
//e.classList.remove（'放大'）
//e.classList.remove（'Show\u hide'）
e、 classList.toggle（'noVisu'）
})
}
/*
Bt_toS.onclick=>{
ElmsTo.forEach（e=>{
e、 classList.remove（'noVisu'）
e、 classList.remove（'放大'）
e、 切换（'Show\u hide'）
})
}
*/

。放大{颜色：红色；背景色：浅绿色}
.noVisu{可见性：隐藏}
.Show_hide{display:none}

我试图找到一些简单的现成Javascript来实现我想要的。
我不知道Javascript，但我可以做一些简单的事情，比如填写类别（例如，将类指定为“noun1”或“noun2”）。
最好不要将每次事件指定为单独的事件

这似乎是一个常识性的目标，但似乎没有一种资源能够解决它。
W3schools是可笑的（与id相关，所以一次只有一个元素）。
一些资源提供了错误的解决方案，其中包含旧的“双击”问题（最初您必须
单击两次）。很多都与非常特定的案例有关，或者需要了解JS和数组。我找到了
没有什么能达到我想要的，那就是