選擇給定班級的下一個元素

我想隱藏並在我的頁面中顯示某些表單。選擇給定班級的下一個元素

對於每種形式theres鏈接，我想，當我點擊這個鏈接，它隱藏並顯示最接近的鏈接形式。

我的代碼如下所示：

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

來源

2010-06-15 user284295

'.flagForm'選擇器應該工作。你的代碼必須有錯誤。 – Alsciende 2010-06-15 10:02:56

Alsciende是對的，它應該工作。你確定你把flagForm類給了你的表單元素嗎？ – 2010-06-15 10:09:56

已編輯的問題 – user284295 2010-06-16 07:58:35

爲了避免危險的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(); 
});

來源

2010-06-15 09:59:15 Alsciende

選擇給定班級的下一個元素

回答

相關問題