Question

我无法解决这个Javascript的问题。我需要以下代码的帮助，这里是代码段：

<div class="container">
  <input type="submit" class="clicktoshow" />

  <form class="hidden">
  </form>
</div>

我将在PHP中使用数组来使用相同的代码显示多个容器，所以我想避免使用id。

基本上表单是隐藏的，我希望它在单击提交时显示，会有很多容器div，所以我不希望点击显示所有表单，只是与输入/在对齐的表单它的父元素。

这可能吗？

请帮助：|？

Answer 1

试试此代码

document.getElementsByClassName('clicktoshow')[0].onclick = function(Event){
     var form = Event.target.parentNode.children[1]; //form object 
     form.style.display = "block"; // form node action
};

如果代码中的类repeated，则需要迭代事件代码像

var cls = document.getElementsByClassName('clicktoshow');
for(var i in cls){
  cls[i].onclick = function(Event){ 
   var form = Event.target.parentNode.children[1]; //form object 
    form.style.display = "block"; // form node action
 };

}

DEMO

注意：该代码适用于现代浏览器。

Answer 2

* 是试试这个 *

var clickClass= document.getElementsByClassName('clicktoshow');

clickClass.onclick = function(){
  // your code here
}

<强> more info

<强> more info link 2

Answer 3

是的，你可以这样做....

var element = document.getElementsByClassName('clicktoshow');

element.onclick = function(){
  var parent = element.parentNode;
  var form = parent.getElementByClassName('hidden');
}

Javascript onClick可以使用类

3 个答案: