【发布时间】：2014-06-15 00:07:37
【问题描述】：
我在这里阅读了一个在 ASP.Net 中制作嵌套网格视图的教程：http://www.aspsnippets.com/Articles/Nested-GridView-Example-in-ASPNet-using-C-and-VBNet.aspx。 在教程中，jQuery 用于显示和隐藏嵌套的 gridview。在 jQuery 中，他使用了 src 属性，该属性 = 加号或减号之类的选择器：
<script type="text/javascript">
$("[src*=plus]").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
$(this).attr("src", "./Content/Images/minus2.png");
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "./Content/Images/plus2.png");
$(this).closest("tr").next().remove().fadeOut();
});
我希望能够改为使用类或 id 作为选择器，例如：
$("#collapserows").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
$(this).attr("src", "./Content/Images/minus2.png");
});
$("#collapserows").live("click", function () {
$(this).attr("src", "./Content/Images/plus2.png");
$(this).closest("tr").next().remove();
});
但是，无论出于何种原因，这都不起作用。我要选择的元素是图像：
<img alt="" id="collapserows" style="cursor: pointer" src="Content/Images/plus2.png" />
我认为属性选择器正在选择 img 元素。不应该引用 id 也选择 img 元素并工作吗？我也尝试了一个类，但没有运气。我希望能够这样做的原因是我可以使用相同的图像来折叠/展开单个嵌套网格视图并折叠/展开所有嵌套网格视图。
非常感谢任何帮助。 谢谢。
附加代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NestedGridView.aspx.cs" Inherits="NestedGridView" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content/CSS/GridViewStyleSheet.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#collapserows").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
$(this).attr("src", "./Content/Images/minus2.png");
});
$("#collapserows").live("click", function () {
$(this).attr("src", "./Content/Images/plus2.png");
$(this).closest("tr").next().remove().fadeOut();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView"
runat="server"
AutoGenerateColumns="false"
AlternatingRowStyle-CssClass="AltRow"
RowStyle-CssClass="Row"
HeaderStyle-CssClass="Header"
OnRowDataBound="GridView_RowDataBound"
DataKeyNames="CustomerID">
<Columns>
<asp:TemplateField HeaderStyle-CssClass="Header">
<HeaderTemplate>
<img alt="" id="collapseallrows" style="cursor: pointer" src="Content/Images/plus2.png" />
</HeaderTemplate>
<ItemTemplate>
<img alt="" id="collapserows" style="cursor: pointer" src="Content/Images/plus2.png" />
<asp:Panel style="display:none" runat="server">
<asp:GridView ID="InnerGridView"
runat="server"
AutoGenerateColumns="false"
Width="100%">
<Columns>
<asp:BoundField DataField="CustomerID" Visible="false"/>
<asp:TemplateField HeaderText="Customer ID" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="CustomerIDLabel" Text='<%# Bind("CustomerID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Employee ID" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="EmployeeIdLabel" Text='<%# Bind("EmployeeID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Freight" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="FreightLabel" Text='<%# Bind("Freight") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Ship Name" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="ShipNameLabel" Text='<%# Bind("ShipName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Ship Address" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="ShipAddressLabel" Text='<%# Bind("ShipAddress") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Ship City" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="ShipCityLabel" Text='<%# Bind("ShipCity") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Postal Code" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="ShipPostalCodeLabel" Text='<%# Bind("ShipPostalCode") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Ship Country" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="ShipCountryLabel" Text='<%# Bind("ShipCountry") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Company Name" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="CompanyNameLabel" Text='<%# Bind("CompanyName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Contact Name" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="ContactNameLabel" Text='<%# Bind("ContactName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Contact Title" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="ContactTitleLabel" Text='<%# Bind("ContactTitle") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="AddressLabel" Text='<%# Bind("Address") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="City" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="CityLabel" Text='<%# Bind("City") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Postal Code" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="PostalCodeLabel" Text='<%# Bind("PostalCode") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Country" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="countryLabel" Text='<%# Bind("Country") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Phone" HeaderStyle-CssClass="Header" >
<ItemTemplate>
<asp:Label runat="server" ID="PhoneLabel" Text='<%# Bind("Phone") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
【问题讨论】：
-
你使用的是哪个 jQuery 版本？
-
请提供一个最小但完整的示例。由于您使用 DOM，因此需要它的示例（您的 HTML）。
-
*=是一个包含选择器。[src*=plus]匹配包含“加号”的 src 属性。 -
您是否在 dom 就绪状态下执行此操作？
-
我不认为它处于 dom 就绪状态。我提供了所有的标记。另外，我假设 *= 是一个包含选择器，我只是想知道为什么我不能使用 id 或类