單擊按鈕時，隱藏元素並顯示我需要的元素

Question

每當我單擊第一個按鈕時，我想隱藏 rest 個元素並顯示第一個項目的標題和描述，我也想對 rest 個項目執行此操作。 每當我嘗試這樣做時，我都無法定位我的 function 中的所有元素。有人可以幫忙嗎？ 我還應該向按鈕添加類似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的更新應該可以解決問題。

主要變化是您將事件偵聽器附加到所有按鈕（將querySelector('.click')更改為querySelectorAll('.click') 。助手 function showItem獲取一個索引，該索引是要顯示的項目（並隱藏所有休息）。

我正在使用hidden屬性來顯示/隱藏元素。 您可以改為在具有display: none的項目中添加或刪除 class 。

 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>