jquery 切换/显示隐藏

Question

I have following markup which is generated dynamically using C# in my asp.net MVC2 application.我在我的 asp.net MVC2 应用程序中使用 C# 动态生成了以下标记。 There could be more rows depending on data in database.根据数据库中的数据，可能会有更多行。 I have shown two rows.我已经展示了两行。 one is view row other is edit row.一个是查看行，另一个是编辑行。 by default I want 'view' row(s) visible and rows with id 'edit' will be invisible.默认情况下，我希望“查看”行可见，而 ID 为“编辑”的行将不可见。 I want to use jQuery so that:我想使用 jQuery 以便：

on click of toggle link, I want view row invisible and edit row visible单击切换链接时，我希望查看行不可见并编辑行可见
on click of update/cancel images, I want edit row invisible and view rows visible.单击更新/取消图像时，我想编辑不可见的行并查看可见的行。 edit button will cause postback编辑按钮将导致回发
There can be more than one rows with same id (view or edit), do i need to use class instead of id?可以有不止一行具有相同的 id（查看或编辑），我需要使用 class 代替 id 吗？

<table>
  <tr id="view">
    <a id="toggle" class="icon-button" href="#">
  </tr>
  <tr id="edit" style="display:none">
    <img id="update" alt="Update" src="/static/images/update.png">
    <img id="cancel" alt="cancel" src="/static/images/cancel.png">
  </tr>
  <tr id="view">
    <a id="toggle" class="icon-button" href="#">
  </tr>
  <tr id="edit" style="display:none">
    <img id="update" alt="Update" src="/static/images/update.png">
    <img id="cancel" alt="cancel" src="/static/images/cancel.png">
  </tr>
</table>

[EDIT] [编辑]

I used this but it is not working:我使用了这个，但它不起作用：

<script type="text/javascript">
$(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;
    }
});

Please suggest solution using jQuery/JavaScript or any any other ASP.NET alternative请使用 jQuery/JavaScript 或任何其他 ASP.NET 替代方案提出解决方案

Answer 1

I think you may run into problems having multiple elements with the same ID, and it will certainly confuse you in the future.我认为您可能会遇到具有相同 ID 的多个元素的问题，并且将来肯定会让您感到困惑。

My suggestion is to use classes instead.我的建议是改用类。 Small difference in your markup but big difference in semantics/intent.您的标记差异很小，但语义/意图差异很大。

Then, you could write simple jQuery code as the click events for your buttons (this goes in your document.ready):然后，您可以编写简单的 jQuery 代码作为按钮的单击事件（这在您的 document.ready 中）：

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

and so on.等等。

Answer 2

why dont you use jquery .toggle itself http://api.jquery.com/toggle/你为什么不使用 jquery .toggle本身http://api.jquery.com/toggle/

Answer 3

Yes, your rows will need classes.是的，您的行将需要类。 Then you can toggle your rows like this:然后你可以像这样切换你的行：

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

<table>
<tr id="view" class="view">
<a id="toggle" class="icon-button" href="#">
</tr>
<tr id="edit" class="edit" style="display:none">
<img id="update" alt="Update" src="/static/images/update.png">
<img id="cancel" alt="cancel" src="/static/images/cancel.png">
</tr>
<tr id="view" class="view">
<a id="toggle" class="icon-button" href="#">
</tr>
<tr id="edit" class="edit" style="display:none">
<img id="update" alt="Update" src="/static/images/update.png">
<img id="cancel" alt="cancel" src="/static/images/cancel.png">
</tr>
</table>

Answer 4

You had a javascript issue.您遇到了 javascript 问题。

Try This:尝试这个：

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
    <table>
        <tr>
            <td>
                <a class="toggle" href="#">Toggle</a>
            </td>
        </tr>
        <tr style="display:none">
            <td>
                <img class="update" alt="Update" src="/static/images/update.png" />
                <img class="cancel" alt="cancel" src="/static/images/cancel.png" />
            </td>
        </tr>
        <tr>
            <td>
                <a class="toggle" href="#">Toggle</a>
            </td>
        </tr>
        <tr style="display:none">
            <td>
                <img class="update" alt="Update" src="/static/images/update.png" />
                <img class="cancel" alt="cancel" src="/static/images/cancel.png" />
            </td>
        </tr>
    </table>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function() {
        $(".toggle").click(function(){
            $(this).parents("tr:first").next().toggle();
        });
        $(".cancel").click(function(){
            $(this).parents("tr:first").prev().toggle();
        });
    });
</script>

Answer 5

So, assuming you make the following changes:因此，假设您进行了以下更改：

Wrap your rows in <td> cells to conform to a table format.将行包装在<td>单元格中以符合表格格式。
Use class names instead of IDs (as I mentioned in a comment, an ID must be unique across the entire page).使用 class 名称而不是 ID（正如我在评论中提到的，ID 在整个页面中必须是唯一的）。
fix your anchor tags to include some form of text.修复您的锚标签以包含某种形式的文本。

(Some of these may just be becuase you posted a demo snippet, I'm not sure). （其中一些可能只是因为您发布了一个演示片段，我不确定）。 Then, I made a couple of adjustments like made the cancel a link instead of an image, but an image will work.然后，我做了一些调整，比如取消链接而不是图像，但图像会起作用。

<table>
  <tr class="view">
      <td>
          <a class="toggle" class="icon-button" href="#">Edit</a>
      </td>
  </tr>
  <tr class="edit" style="display:none">
      <td>
          <img class="update" alt="Update" src="/static/images/update.png">
          <a class="cancel" href="#">Cancel</a>
      </td>
  </tr>
  <tr class="view">
      <td>
        <a class="toggle" class="icon-button" href="#">Edit</a>
      </td>
  </tr>
  <tr class="edit" style="display:none">
      <td>
        <img class="update" alt="Update" src="/static/images/update.png">
        <a class="cancel" href="#">Cancel</a>
      </td>
  </tr>
</table>

Then the following will work (with jQuery):然后以下将起作用（使用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演示

jquery 切换/显示隐藏

问题描述

5 个解决方案

解决方案1
1 2011-06-01 16:32:27

解决方案2
0 2011-06-01 16:32:19

解决方案3
0 2011-06-01 16:33:10

解决方案4
0 2011-06-01 17:20:34

解决方案5
0 已采纳 2011-06-01 17:21:16

jquery 切换/显示隐藏

问题描述

5 个解决方案

解决方案1 1 2011-06-01 16:32:27

解决方案2 0 2011-06-01 16:32:19

解决方案3 0 2011-06-01 16:33:10

解决方案4 0 2011-06-01 17:20:34

解决方案5 0 已采纳 2011-06-01 17:21:16

解决方案1
1 2011-06-01 16:32:27

解决方案2
0 2011-06-01 16:32:19

解决方案3
0 2011-06-01 16:33:10

解决方案4
0 2011-06-01 17:20:34

解决方案5
0 已采纳 2011-06-01 17:21:16