开发者问题收集

点击时隐藏/显示 div

2022-08-26
79
javascript html css

我有一个脚本，单击按钮时会隐藏图像并显示文本。但是，我在不同的 div 中也有类似的按钮执行相同的操作。单击按钮时，无论按下哪个按钮，第一个按钮都会受到影响。

我该如何解决这个问题？

下面是我的 JS。我该如何让按钮只影响自身，而不仅仅是第一个按钮？ 

function hideText() { 
    
    const btn = document.querySelector('#info');
    const infoHide = document.querySelector('.info-hide');
    
    infoHide.style.display = "block"
    btn.style.display = 'none'
    setTimeout(()=>{btn.style.display = 'block'; infoHide.style.display= "none"}, 2000)
  }
<div>
  <button id="info" onClick="hideText()"> A button </button>
<div class="info-hide" style="display:none;">Copied!</div>
</div>
 <div>
  <button id="info" onClick="hideText()"> A button </button>
<div class="info-hide" style="display:none;">Copied!</div>
</div>
3个回答

我更改了您的事件侦听器，以了解触​​发事件的元素。实际上，这严格来说不是一个事件侦听器，而只是一个在事件发生时调用的函数。

有更好的方法可以使用 .addEventListener 

function hideText(target) {
  const infoHide = target.parentElement.querySelector('.info-hide');    
  infoHide.style.display = "block"
  target.style.display = 'none'
  setTimeout(() => {
    target.style.display = 'block';
    infoHide.style.display = "none";
  }, 2000)
}
button{
  cursor: pointer;
  margin-bottom: 1rem;
}
<div>
  <button id="info1" onClick="hideText(this);">A button</button>
  <div class="info-hide" style="display:none;">Copied!</div>
</div>
<div>
  <button id="info2" onClick="hideText(this);">A button</button>
  <div class="info-hide" style="display:none;">Copied!</div>
</div>

无论如何，正如另一位用户在评论中指出的那样，id 属性应该是唯一的，所以我编辑了答案以满足该条件。

在这里，我使用一种不涉及在 html 中声明定义的事件侦听器的策略添加了方法： 

document.addEventListener('DOMContentLoaded',()=>{
  document.querySelectorAll('.smartbutton').forEach((btn)=>{
    btn.addEventListener('click', (event)=>{ hideText(event.target); });
  });
});

function hideText(target) {
  const infoHide = target.parentElement.querySelector('.info-hide');    
  infoHide.style.display = "block"
  target.style.display = 'none'
  setTimeout(() => {
    target.style.display = 'block';
    infoHide.style.display = "none";
  }, 2000)
}
.smartbutton{
  cursor: pointer;
  margin-bottom: 1rem;
}

.info-hide{
  display: none;
}
<div>
  <button id="info1" class="smartbutton">A button</button>
  <div class="info-hide">Copied!</div>
</div>
<div>
  <button id="info2" class="smartbutton">A button</button>
  <div class="info-hide">Copied!</div>
</div>
Diego D
2022-08-26

querySelector 提取与您的字符串匹配的第一个元素。这就是为什么总是第一个按钮和第一个信息受到影响的原因。您可以使用 this 关键字提供按钮本身，并提供一个确定要显示的 div 的 id。 

function hideText(button, infoClassname) {

  const info = document.querySelector(`.${infoClassname}`);
  console.log(button)
  info.style.display = "block"
  button.style.display = 'none'

  setTimeout(() => {
    button.style.display = 'block';
    info.style.display = "none"
  }, 2000)
}
<div>
  <button id="info" onClick="hideText(this, 'info-hide-1')"> A button </button>
  <div class="info-hide-1" style="display:none;">Copied!</div>
</div>
<div>
  <button id="info" onClick="hideText(this, 'info-hide-2')"> A button </button>
  <div class="info-hide-2" style="display:none;">Copied!</div>
</div>
Alper
2022-08-26

将 div 中的 id 从所有“info”更改为“info1”/“info2”/“info3”/，并在 js const btn = document.querySelector('#info1') 中做相同的更改；

caomengliang98
2022-08-26