Question

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

对于每个表单都有链接，我想要，当我点击此链接时，它隐藏并显示最近的链接形式。

我的代码如下所示：

    $$('.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选择器，它不起作用

Answer 1

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

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

然后，您可以将A元素的ID与正则表达式/link_(.*)/相匹配，以获取表单的ID：

$$('.flagLink').invoke('observe', 'click', function(event) {
    if(event.element().id.match(/link_(.*)/)) $(RegExp.$1).toggle();
});

如果您无法使用此解决方案，那么您必须更具体地说明“最近”的含义。如果链接和表单始终具有共同的祖先，则可以使用css选择器在任何位置查找表单。假设链接和表单总是有一个共同的祖先，即链接的祖父，你可以这样做：

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

选择给定类的下一个元素

1 个答案: