如何在点击 [JS] 上获取元素的 id答案

【问题标题】：How to get id of element on the click [JS]如何在点击 [JS] 上获取元素的 id
【发布时间】：2019-07-07 11:49:00
【问题描述】：

我需要将按钮与 div 的 id 连接起来，现在它们只连接到类。

function addClass(e) {
  // to get the correct effect
  effect = e.target.getAttribute('data-effect');
  // adding the effects
  menu.classList.toggle(effect);
  menu.classList.toggle('st-menu-open');

  // console.log(e.target.getAttribute('data-effect'));
}

完整代码： https://jsfiddle.net/eb26904s/

我想要达到的目标：

Menu1 - 打开 id="menu1" 的 div
Menu2 - 打开 id="menu2" 的 div
单击任意位置 - 关闭菜单

现在他们都打开了带有“cv”类的菜单。

【问题讨论】：

e.target.id 我相信

标签： javascript html css

【解决方案1】：

当您单击 .click 时，ui 和 cv 都会显示，但您只会看到 cv，因为它在 ui 上方。我建议在开始时隐藏并在单击菜单时显示一个。

这是基于您的代码的演示：

var click = document.querySelectorAll('.click');
var st_menu = document.querySelectorAll('.st-menu');
var menu = document.querySelector('#st-container');
var effect;

for (var i = 0; i < click.length; i++) {
  click[i].addEventListener('click', addClass)
}


function addClass(e) {
  // to get the correct effect
  effect = e.target.getAttribute('data-effect');
  for (var i = 0; i < st_menu.length; i++) {
    st_menu[i].classList.remove("d-block");
  }
  var target_id = e.target.getAttribute('data-target');
  var target = document.getElementById(target_id);
  target.classList.toggle("d-block");
  // adding the effects
  menu.classList.toggle(effect);
  menu.classList.toggle('st-menu-open');
}

.ui {
  display: none;
  background: #215DD1;
  color: #fff;
}

.cv {
  display: none;
  background: #FF9F2F;
  color: #fff;
}

.cv.d-block, .ui.d-block {
  display: block;
}

.st-container {
	position: relative;
	overflow: hidden;
}

.st-menu {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	visibility: hidden;
	width: 300px;
	height: 100%;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.st-effect-1.st-menu {
	visibility: visible;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}

.st-effect-1.st-menu-open .st-effect-1.st-menu {
	visibility: visible;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.st-effect-1.st-menu::after {
	display: none;
}

body {
	background: #444;
	color: #48a770;
}

<div id="st-container">

  <div class="ui st-menu st-effect-1" id="menu1">
  </div>
  
  <div class="cv st-menu st-effect-1" id="menu2">
  </div>
  
  <div class="click" style="position: relative; left: 50%;" data-effect="st-effect-1" data-target="menu1">Menu1</div> 
  
   <div class="click" style="position: relative; left: 50%;" data-effect="st-effect-1" data-target="menu2">Menu2</div> 
  
  </div>

【讨论】：

【解决方案2】：

事件委托更简单..

const StContainer = document.querySelector('#st-container')

StContainer.onclick = e=>
  {
  if (e.target.className!='click') return

  console.log(e.target.textContent, e.target.dataset.effect)

  let STmenu = document.getElementById(e.target.textContent.toLowerCase())

  STmenu.classList.toggle(e.target.dataset.effect)
  STmenu.classList.toggle('st-menu-open');
  }

.ui {
  background: #215DD1;
  color: #fff;
}

.cv {
  background: #FF9F2F;
  color: #fff;
}

.st-container {
	position: relative;
	overflow: hidden;
}

.st-menu {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	visibility: hidden;
	width: 300px;
	height: 100%;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.st-effect-1.st-menu {
	visibility: visible;
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}

.st-effect-1.st-menu-open .st-effect-1.st-menu {
	visibility: visible;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.st-effect-1.st-menu::after {
	display: none;
}

body {
	background: #444;
	color: #48a770;
}

<div id="st-container">
  <div class="ui st-menu st-effect-1" id="menu1">
  </div>
  <div class="cv st-menu st-effect-1" id="menu2">
  </div>
  <div class="click" style="position: relative; left: 50%;" data-effect="st-effect-1">Menu1</div> 
  <div class="click" style="position: relative; left: 50%;" data-effect="st-effect-1">Menu2</div> 
</div>

【讨论】：