jQuery的切换/显示隐藏 [英] jquery toggle/show hide

问题描述

我有以下这是动态使用C＃在我的asp.net MVC2应用程序生成的标记。有可能是根据在数据库中的数据更多的行。我已经表明两行。一个是另一种观点是一行一行的编辑。默认情况下，我想视图行（S）可见和行id为编辑将是不可见的。我想使用jQuery这样：

I have following markup which is generated dynamically using C# in my asp.net MVC2 application. 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. I want to use jQuery so that:

1. 在曲柄连杆的点击，我想视图行无形和编​​辑一行可见


2. 在更新点击/取消影像，我想编辑的行不可见的视图行可见。编辑按钮会引起回发


3. 可以有多个行具有相同的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>

我用这一点，但它不工作：

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

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

Please suggest solution using jQuery/JavaScript or any any other ASP.NET alternative

推荐答案

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

So, assuming you make the following changes:

• 裹在你的行＆LT; TD方式＆gt; 细胞以符合表格格式


• 使用类名称，而不是标识（如我的评论中提到，一个ID必须在整个页面是唯一的）。


• 修正你的锚标记，包括某种形式的文字。

• Wrap your rows in <td> cells to conform to a table format.
• Use class names instead of IDs (as I mentioned in a comment, an ID must be unique across the entire page).
• 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>

那么下面的工作（使用jQuery）：

Then the following will work (with 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的切换/显示隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！