如何用JS

Question

我正试图在JS的帮助下激活html中的删除按钮。 我的按钮代码如下所示

var panel = document.getElementByClassName("btn");
    panel.addEventListener("click",hide);
    function hide(){
	    var panelHide = document.getElementByClassName("mypanel"); 
	    panelHide.className = "hide";
    }

<div class="mypanel">
	<div class="header">My header</div>
	<div class="body">
		<p>body</p>
		<div class="showOnHover">
				<a href="" class="btn btn-xs btn-danger">delete</a>
				</div>
		</div>		
	</div>

当我运行js时它不起作用，我已经在我的CSS文件中写了类似.hide {display：none}的内容。如果有人能回答这个问题，我会非常感激，谢谢

Answer 1

var panel = document.getElementsByClassName("btn")[0];
panel.addEventListener("click",hide);
function hide(){
    var panelHide = document.getElementsByClassName("mypanel")[0]; 
    panelHide.className = "hide";
}

Answer 2

首先我要指出语法是

  

document.getElementsByClassName（＆＃34; BTN＆＃34）;

而不是document.getElementByClassName（＆＃34; btn＆＃34;）;

getElementsByClassName方法返回与条件匹配的元素的类似Array的对象/具有您指定的类名。

因此，为了向所有这些元素添加事件侦听器，可以循环遍历从该方法返回的类似Array的对象，并逐个添加eventlistener。像这样：

var classname = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

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

根据您的情况，这将提供以下代码（请参阅代码段）。

＆＃13;

＆＃13;

   
var panel = document.getElementsByClassName("btn");

function hide(){
	    var panelHide = document.getElementsByClassName("mypanel"); 
	    panelHide.className = "hide";
    }

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

＆＃13;

<div class="mypanel">
	<div class="header">My header</div>
	<div class="body">
		<p>body</p>
		<div class="showOnHover">
				<a href="" class="btn btn-xs btn-danger">delete</a>
				</div>
		</div>		
	</div>

＆＃13;

＆＃13;

＆＃13;

积分转到this post。 希望它有所帮助。

Answer 3

<div class="mypanel">
  <div class="header">
    My header
  </div>
  <div class="body">
    <p>body</p>
    <div class="showOnHover">
      <a href="#" class="btn btn-xs btn-danger">delete</a>
    </div>
  </div>
</div>
    <script>
      var panel = document.getElementsByClassName("btn");
      Array.prototype.forEach.call(panel, element => element.addEventListener('click', hide));

      function hide (event) {
        event.preventDefault();
        var panelHide = document.getElementsByClassName("mypanel");
        Array.prototype.forEach.call(panelHide, element => element.className = 'hide');
      }
    </script>

这是我做的一个例子，首先getElementsByClassName方法返回一个数组，所以我在所有这些方法中添加了hide事件，之后需要使用preventDefault函数来避免重定向。

单击删除链接后，隐藏类将添加到具有mypanel类的所有元素

Answer 4

检查一下。有更好的方法可以做到这一点。

＆＃13;

＆＃13;

var panel = document.querySelector(".btn");    
panel.addEventListener("click",hide);

function hide(e){
    e.preventDefault();

    // now this hides only that div which contains delete link
    // but You can put any class name not showOnHover
    var panelHide = document.querySelector(".showOnHover"); 
    panelHide.classList.add("hide");
}

＆＃13;

.hide {
  display: none;
}

＆＃13;

<div class="mypanel">
  <div class="header">My header</div>
  <div class="body">
      <p>body</p>
      <div class="showOnHover">
          <a href="" class="btn btn-xs btn-danger">delete</a>
      </div>
  </div>      
</div>

＆＃13;

＆＃13;

＆＃13;

Codepen