jquery toggle / show hide

我有以下标记，它是在我的asp.net MVC2应用程序中使用C＃动态生成的。 根据数据库中的数据，可能会有更多行。 我已经展示了两行。 一个是视图行，另一个是编辑行。 默认情况下，我希望“查看”行可见，ID为“编辑”的行将不可见。 我想使用jQuery，以便：

1. 点击切换链接，我希望视图行不可见，编辑行可见
2. 点击更新/取消图像，我想编辑行不可见并查看行可见。 编辑按钮将导致回发
3. 可以有多个具有相同id（查看或编辑）的行，我是否需要使用class而不是id？

[编辑]

我用过这个，但它不起作用：

  $(function () { $(".icon-button").click(function () { alert('I am here'); $('.view,.edit').toggle(); return false; }); $(".icon-button-cancel").click(function(){ alert('I am there'); $('.view,.edit').toggle(); return false; } }); 

请使用jQuery / JavaScript或任何其他ASP.NET替代方案建议解决方案

Answer 1

因此，假设您进行了以下更改：

• 在

  单元格中包装行以符合表格格式。

• 使用类名而不是ID（正如我在评论中提到的，ID在整个页面中必须是唯一的）。
• 修复您的锚标记以包含某种forms的文本。

（其中一些可能只是因为你发布了一个演示片段，我不确定）。 然后，我进行了一些调整，例如取消链接而不是图像，但图像将起作用。

 
 
 
 Edit 
 
 
 
  Cancel 
 
 
 
 Edit 
 
 
 
  Cancel 
 
  

然后以下将工作（使用jQuery）：

 $('.toggle').click(function(){ var $tr = $(this).closest('tr'); $tr.add($tr.next('.edit')).toggle(); }); $('.cancel').click(function(){ var $tr = $(this).closest('tr'); $tr.add($tr.prev('.view')).toggle(); }); 

DEMO

Answer 2

我认为你可能会遇到有多个具有相同ID的元素的问题，这肯定会让你在将来感到困惑。

我的建议是改用类。 标记差异很小但语义/意图差异很大。

然后，您可以编写简单的jQuery代码作为按钮的单击事件（这将在您的document.ready中）：

 $("#update").click(function() { $(".edit").show(); $(".view").hide(); } 

等等。

Answer 3

为什么不使用jquery .toggle本身http://api.jquery.com/toggle/

Answer 4

是的，您的行将需要类。 然后你可以像这样切换你的行：

 $('.view,.edit').toggle();    

Answer 5

你有一个JavaScript问题。

试试这个：

      
 
 
 Toggle 
 
 
 
   
 
 
 
 Toggle