Javascript jquery切换/显示隐藏_Javascript_Jquery_Asp.net

Javascript jquery切换/显示隐藏

javascript jquery asp.net

Javascript jquery切换/显示隐藏,javascript,jquery,asp.net,Javascript,Jquery,Asp.net,我在asp.net MVC2应用程序中使用C#动态生成了以下标记。根据数据库中的数据，可能会有更多行。我已经显示了两行。一个是查看行，另一个是编辑行。默认情况下，我希望“查看”行可见，id为“编辑”的行将不可见。我想使用jQuery以便：单击切换链接，我希望查看行不可见，编辑行可见单击“更新/取消图像”，我希望编辑行不可见，查看行可见。编辑按钮将导致回发可以有多行具有相同的id（查看或编辑），是否需要使用类而不是id [编辑] 我使用了这个，但它不起作用： <script ty

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

单击切换链接，我希望查看行不可见，编辑行可见

单击“更新/取消图像”，我希望编辑行不可见，查看行可见。编辑按钮将导致回发

可以有多行具有相同的id（查看或编辑），是否需要使用类而不是id

[编辑]

我使用了这个，但它不起作用：

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


$（函数（）{
$（“.icon按钮”）。单击（函数（）{
警惕（“我在这里”）；
$（'.view，.edit'）.toggle（）；
返回false；
});
$（“.icon按钮取消”）。单击（函数（）{
警惕（“我在那里”）；
$（'.view，.edit'）.toggle（）；
返回false；
}
});

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

为什么不使用jQuery

。切换

本身

为什么不使用jquery

。切换本身
我认为，如果有多个元素具有相同的ID，您可能会遇到问题，将来肯定会让您感到困惑
我的建议是改用类。标记上的差异很小，但语义/意图上的差异很大
然后，您可以编写简单的jQuery代码作为按钮的单击事件（这会出现在您的document.ready中）：
诸如此类。
我认为，如果有多个元素具有相同的ID，您可能会遇到问题，将来肯定会让您感到困惑
我的建议是改用类。标记上的差异很小，但语义/意图上的差异很大
然后，您可以编写简单的jQuery代码作为按钮的单击事件（这会出现在您的document.ready中）：
依此类推。是的，您的行将需要类。
然后您可以像这样切换行：
$('.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>

$（'.view，.edit'）.toggle（）；
是的，您的行将需要类。
然后您可以像这样切换行：
$('.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>

$（'.view，.edit'）.toggle（）；
您遇到了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>


$（文档）.ready（函数（）{
$（“.toggle”）。单击（函数（）{
$（this）.parents（“tr:first”）.next（）.toggle（）；
});
$（“.cancel”）。单击（函数（）{
$（this）.parents（“tr:first”）.prev（）.toggle（）；
});
});
您遇到了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>


$（文档）.ready（函数（）{
$（“.toggle”）。单击（函数（）{
$（this）.parents（“tr:first”）.next（）.toggle（）；
});
$（“.cancel”）。单击（函数（）{
$（this）.parents（“tr:first”）.prev（）.toggle（）；
});
});
因此，假设您进行了以下更改：

将行包装在
单元格中，以符合表格格式
使用类名而不是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>

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

将行包装在
单元格中，以符合表格格式
使用类名而不是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>

非常糟糕的结构，HTML应该只有一个“编辑”id。一个id应该是唯一的；也许您应该转换为使用类名…可以有多行具有相同id（查看或编辑），我是否需要使用类而不是id？
…嗯，是的。id是一个唯一的标识符，如果存在多个，它怎么可能是唯一的？使用多个，您将编写不符合要求的标记，将浏览器发送到quirksmode。使用类代替。仅供参考：您可以使用多个类，例如（class=“foo bar”）只要它们是以空格分隔的
非常糟糕的结构，HTML就应该只有一个“编辑”id。一个id应该是唯一的；也许您应该转换为使用类名…可以有多行具有相同id（查看或编辑），我是否需要使用类而不是id？
…嗯，是的。id是一个唯一的标识符，如果存在多个，它怎么可能是唯一的？使用多个，您将编写不符合要求的标记，将浏览器发送到quirksmode。使用类代替。仅供参考：您可以使用多个类，例如（class=“foo bar”）只要它们是以空格分隔的
多个具有相同DOM ID的元素肯定会导致问题。此外，.toggle（）是对.show（）和.hide（）的有用添加。具有相同DOM ID的多个元素肯定会导致问题