[英]On button click, hide elements and display the one I need
Whenever I click on the first button, I want to hide rest of elements and display the title with description for first item, I want to do this for the rest items as well.每当我单击第一个按钮时,我想隐藏 rest 个元素并显示第一个项目的标题和描述,我也想对 rest 个项目执行此操作。 Whenever I am trying to do this, I am not able to target all elements in my function. Can someone assist?
每当我尝试这样做时,我都无法定位我的 function 中的所有元素。有人可以帮忙吗? Also should I add to the buttons something like
data-*
and based on that display/show the div?我还应该向按钮添加类似
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>
The following update to your MyClass
should do the trick.以下对
MyClass
的更新应该可以解决问题。
The main change is that you attach an event listenter to all buttons (changed querySelector('.click')
to querySelectorAll('.click')
. And the helper function showItem
takes an index which is which item to show (and hide all the rest).主要变化是您将事件侦听器附加到所有按钮(将
querySelector('.click')
更改为querySelectorAll('.click')
。助手 function showItem
获取一个索引,该索引是要显示的项目(并隐藏所有休息)。
I'm using the hidden
attribute to show/hide elements.我正在使用
hidden
属性来显示/隐藏元素。 You could instead add or remove a class from the item that has the display: none
.您可以改为在具有
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.