Javascript 选择给定类的下一个元素

我想在我的页面中隐藏和显示一些表单

每个表单都有一个链接，当我点击这个链接时， 它隐藏并显示最接近的链接形式

我的代码如下所示：

    $$('.flagLink').each(function(s){
        $(s).observe('click', function(event) {
            // here i want to hide and show the nearest form
        });
    });

我试过这个：

    $$('.flagLink').each(function(s){
        $(s).observe('click', function(event) {
            $(s).next('form').toggle();
        });
    });

这是可行的，但我想更准确地说：

    $$('.flagLink').each(function(s){
        $(s).observe('click', function(event) {
            $(s).next('.flagForm').toggle();
        });
    });

但是.flagForm选择器不起作用

我的代码如下所示： 旗

首先，我隐藏页面中的所有表单：

          $$('.flagForm').each(function(s){
             $(s).hide();
          });

然后在它们上添加onclick事件：

$$('.flagLink').each(function(s){
        $(s).observe('click', function(event) {
            $(s).next('.flagForm').toggle();
        });
    });

---

但是对于.flagForm选择器，它不起作用

为了避免危险的DOM遍历，我建议使用元素ID将表单绑定到其链接，如下所示：

<form id="myform1">...</form>
...
<a id="link_myform1" class="flagLink" href="#">...</a>

如果您不能使用此解决方案，那么您必须更具体地说明“最近”的含义。如果链接和表单总是有一个共同的祖先，那么您可以使用css选择器在任何地方查找表单。假设链接和表单始终有一个共同的祖先，即链接的父级，您可以执行以下操作：

$$('.flagLink').invoke('observe', 'click', function(event) {
    var form = event.element().up(2).select('form').first();
    if(form) form.toggle();
});

---

.flagForm

选择器应该可以工作。你的代码一定有问题。Alsciende是对的，它应该可以工作。是否确定已将flagForm类指定给表单元素？

$$('.flagLink').invoke('observe', 'click', function(event) {
    var form = event.element().up(2).select('form').first();
    if(form) form.toggle();
});