Question

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

点击切换链接，我希望视图行不可见并编辑可见行
点击更新/取消图片，我想编辑行不可见并查看行可见。编辑按钮将导致回发
可以有多个具有相同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>

[编辑]

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

<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;
    }
});

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

Answer 1

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

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

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

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

等等。

Answer 2

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

Answer 3

是的，你的行需要上课。然后你可以像这样切换你的行：

$('.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

你有一个javascript问题。

试试这个：

<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

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

将行包裹在<td>单元格中以符合表格格式。
使用类名而不是ID（正如我在评论中提到的，ID在整个页面中必须是唯一的。）
修复您的锚标记以包含某种形式的文字。

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

<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>

然后以下内容将起作用（使用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 toggle / show hide

5 个答案: