jquery 切换/显示隐藏
[英]jquery toggle/show hide
问题描述
我在我的 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 替代方案提出解决方案
5 个解决方案
解决方案1
1 2011-06-01 16:32:27
我认为您可能会遇到具有相同 ID 的多个元素的问题，并且将来肯定会让您感到困惑。
我的建议是改用类。 您的标记差异很小，但语义/意图差异很大。
然后，您可以编写简单的 jQuery 代码作为按钮的单击事件（这在您的 document.ready 中）：
$("#update").click(function() {
$(".edit").show();
$(".view").hide();
}
等等。
解决方案2
0 2011-06-01 16:32:19
你为什么不使用 jquery .toggle本身http://api.jquery.com/toggle/
解决方案3
0 2011-06-01 16:33:10
是的，您的行将需要类。 然后你可以像这样切换你的行：
$('.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>
解决方案4
0 2011-06-01 17:20:34
您遇到了 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>
解决方案5
0 已采纳 2011-06-01 17:21:16
因此，假设您进行了以下更改：
- 将行包装在
<td>单元格中以符合表格格式。 - 使用 class 名称而不是 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();
});
jQuery切换隐藏和切换显示
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.