如何在点击[JS]时获取元素ID

Łukasz Szewczyk 发表于 Dev

ŁukaszSzewczyk

我需要将按钮与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”类打开菜单。

崇乐

当您单击时.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。