单击按钮，隐藏元素并显示我需要的元素

Question

每当我点击第一个按钮时，我想隐藏其余元素，并显示第一个项目的标题和描述，我也想对其余项目执行此操作。每当我尝试这样做时，我都无法针对我的功能中的所有元素。有人能帮忙吗？此外，我是否应该向按钮添加类似data-*的内容，并基于该显示/显示div？

class MyClass {
constructor() {
this.items = document.querySelectorAll('.test');
this.btn = document.querySelector('.click');
console.log(this.items); //logs elements
this.btn.addEventListener("click", this.testFunc);
}

testFunc() {
console.log(this.items); //undefined ?
}
}
new MyClass();

.test {
display: none;
}

<div class="item first">
<h3>Item-1</h3>
<p class="test">
dadwa dwao dawkda
</p>
</div>
<div class="item second">
<h3>Item-1</h3>
<p class="test">
dadwa dwao dawkda
</p>
</div>
<div class="item third">
<h3>Item-1</h3>
<p class="test">
dadwa dwao dawkda
</p>
</div>

<button class="click">
Test
</button>
<button class="click">
Test
</button>
<button class="click">
Test
</button>

Answer 1

以下对MyClass的更新应该可以做到这一点。

主要的变化是将事件listenter附加到所有按钮(将querySelector('.click')更改为querySelectorAll('.click')。辅助函数showItem获取一个索引，该索引是要显示的项目(并隐藏所有其他项目(。

我正在使用hidden属性来显示/隐藏元素。您可以改为在具有display: none的项中添加或删除类。

class MyClass {
constructor() {
this.items = document.querySelectorAll(".test");
this.btns = document.querySelectorAll(".click");
this.items.forEach((item, index) => {
item.setAttribute("hidden", true);
this.btns
.item(index)
.addEventListener("click", (ev) => this.showItem(index));
});
}
showItem(idx) {
this.items.forEach((item, index) => {
if (index === idx) {
item.removeAttribute("hidden");
} else {
item.setAttribute("hidden", true);
}
});
}
}
new MyClass();

<div class="item first">
<h3>Item-1</h3>
<p class="test">
dadwa dwao dawkda
</p>
</div>
<div class="item second">
<h3>Item-2</h3>
<p class="test">
dadwa dwao dawkda
</p>
</div>
<div class="item third">
<h3>Item-3</h3>
<p class="test">
dadwa dwao dawkda
</p>
</div>

<button class="click">
Test 1
</button>
<button class="click">
Test 2
</button>
<button class="click">
Test 3
</button>