让我写下一些代码来更清楚地解释我的问题,我有一个Asp DataList如下:
<asp:DataList ID="DataList1" runat="server" BorderWidth="0px" CellPadding="0" CellSpacing="0"
RepeatColumns="1" RepeatDirection="Vertical" ShowFooter="False" ShowHeader="False"
Width="100%">
<ItemTemplate>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="height: 100%;" id='<%: "HomeSectionID" + Session["Counter"].ToString() %>'>
<tr>
<td style="width: 70%;">
<asp:Label ID="Label3" runat="server" Font-Bold="True" Font-Size="10pt" class="SpTitle"
Style="display: none;"><%: Title %></asp:Label>
نام محصول :
<asp:Label ID="aspLabel10" runat="server" Text='<%# Bind("GoodName") %>'></asp:Label>
<br />
نام نويسنده :<asp:Label ID="aspLabel5" runat="server" Text='<%# Bind("Writer") %>'></asp:Label>
<br />
ناشر :
<asp:Label ID="Label2" runat="server" CssClass="prod-black-text" SkinID="BestSellsImageaspLabel1skin"
Text='<%# Bind("GoodExplain1") %>'></asp:Label>
<div class="ShortDescriptionBestSales" style="display: none;">
<asp:Label ID="aspLabelText1" runat="server" Text='<%# Bind("Text1") %>'></asp:Label><br />
قيمت :
<asp:Label ID="aspLabel1" runat="server" CssClass="prod-black-text" SkinID="BestSellsImageaspLabel1skin"
Text='<%# Bind("MaxSellPrice") %>'></asp:Label>
</div>
</td>
<td style="width: 30%; vertical-align: middle;">
<asp:Image ID="Image13" runat="server" Height="62px"
ImageUrl='<%# Eval("image") %>' />
</td>
</tr>
</table>
<% int counter = int.Parse(Session["Counter"].ToString());
counter++;
Session["Counter"] = counter;
%>
</ItemTemplate>
</asp:DataList>
在javascript文件中我有一些jquery代码:
$("#HomeSectionID1").mouseover(function () {
old_color = $(this).css("background-color");
if (old_color != "#cccccc")
$(this).css("background-color", "#e8e8eb");
});
$("#HomeSectionID1").mouseout(function () {
if (old_color != "#cccccc")
$(this).css("background-color", "#ffffff");
});
$("#HomeSectionID2").mouseover(function () {
old_color = $(this).css("background-color");
if (old_color != "#cccccc")
$(this).css("background-color", "#e8e8eb");
});
$("#HomeSectionID2").mouseout(function () {
if (old_color != "#cccccc")
$(this).css("background-color", "#ffffff");
});
$("#HomeSectionID3").mouseover(function () {
old_color = $(this).css("background-color");
if (old_color != "#cccccc")
$(this).css("background-color", "#e8e8eb");
});
$("#HomeSectionID3").mouseout(function () {
if (old_color != "#cccccc")
$(this).css("background-color", "#ffffff");
});
$("#HomeSectionID4").mouseover(function () {
old_color = $(this).css("background-color");
if (old_color != "#cccccc")
$(this).css("background-color", "#e8e8eb");
});
$("#HomeSectionID4").mouseout(function () {
if (old_color != "#cccccc")
$(this).css("background-color", "#ffffff");
});
$("#HomeSectionID5").mouseover(function () {
old_color = $(this).css("background-color");
if (old_color != "#cccccc")
$(this).css("background-color", "#e8e8eb");
});
$("#HomeSectionID5").mouseout(function () {
if (old_color != "#cccccc")
$(this).css("background-color", "#ffffff");
});
$("#HomeSectionID6").mouseover(function () {
old_color = $(this).css("background-color");
if (old_color != "#cccccc")
$(this).css("background-color", "#e8e8eb");
});
$("#HomeSectionID6").mouseout(function () {
if (old_color != "#cccccc")
$(this).css("background-color", "#ffffff");
});
$("#HomeSectionID7").mouseover(function () {
old_color = $(this).css("background-color");
if (old_color != "#cccccc")
$(this).css("background-color", "#e8e8eb");
});
$("#HomeSectionID7").mouseout(function () {
if (old_color != "#cccccc")
$(this).css("background-color", "#ffffff");
});
$("#HomeSectionID8").mouseover(function () {
old_color = $(this).css("background-color");
if (old_color != "#cccccc")
$(this).css("background-color", "#e8e8eb");
});
$("#HomeSectionID8").mouseout(function () {
if (old_color != "#cccccc")
$(this).css("background-color", "#ffffff");
});
$("#HomeSectionID9").mouseover(function () {
old_color = $(this).css("background-color");
if (old_color != "#cccccc")
$(this).css("background-color", "#e8e8eb");
});
$("#HomeSectionID9").mouseout(function () {
if (old_color != "#cccccc")
$(this).css("background-color", "#ffffff");
});
$("#HomeSectionID10").mouseover(function () {
old_color = $(this).css("background-color");
if (old_color != "#cccccc")
$(this).css("background-color", "#e8e8eb");
});
$("#HomeSectionID10").mouseout(function () {
if (old_color != "#cccccc")
$(this).css("background-color", "#ffffff");
});
$("#HomeSectionID11").mouseover(function () {
old_color = $(this).css("background-color");
if (old_color != "#cccccc")
$(this).css("background-color", "#e8e8eb");
});
$("#HomeSectionID11").mouseout(function () {
if (old_color != "#cccccc")
$(this).css("background-color", "#ffffff");
});
$("#HomeSectionID12").mouseover(function () {
old_color = $(this).css("background-color");
if (old_color != "#cccccc")
$(this).css("background-color", "#e8e8eb");
});
$("#HomeSectionID12").mouseout(function () {
if (old_color != "#cccccc")
$(this).css("background-color", "#ffffff");
});
$("#HomeSectionID1").click(function () {
$("#HomeSectionID2").css("background-color", "#ffffff");
$("#HomeSectionID3").css("background-color", "#ffffff");
LoadSelection(this);
});
$("#HomeSectionID2").click(function () {
$("#HomeSectionID1").css("background-color", "#ffffff");
$("#HomeSectionID3").css("background-color", "#ffffff");
LoadSelection(this);
});
$("#HomeSectionID3").click(function () {
$("#HomeSectionID1").css("background-color", "#ffffff");
$("#HomeSectionID2").css("background-color", "#ffffff");
LoadSelection(this);
});
$("#HomeSectionID4").click(function () {
LoadSelection(this);
$("#HomeSectionID5").css("background-color", "#ffffff");
$("#HomeSectionID6").css("background-color", "#ffffff");
});
$("#HomeSectionID5").click(function () {
LoadSelection(this);
$("#HomeSectionID4").css("background-color", "#ffffff");
$("#HomeSectionID6").css("background-color", "#ffffff");
});
$("#HomeSectionID6").click(function () {
LoadSelection(this);
$("#HomeSectionID4").css("background-color", "#ffffff");
$("#HomeSectionID5").css("background-color", "#ffffff");
});
$("#HomeSectionID7").click(function () {
LoadSelection(this);
$("#HomeSectionID8").css("background-color", "#ffffff");
$("#HomeSectionID9").css("background-color", "#ffffff");
});
$("#HomeSectionID8").click(function () {
LoadSelection(this);
$("#HomeSectionID7").css("background-color", "#ffffff");
$("#HomeSectionID9").css("background-color", "#ffffff");
});
$("#HomeSectionID9").click(function () {
LoadSelection(this);
$("#HomeSectionID7").css("background-color", "#ffffff");
$("#HomeSectionID8").css("background-color", "#ffffff");
});
$("#HomeSectionID10").click(function () {
LoadSelection(this);
$("#HomeSectionID11").css("background-color", "#ffffff");
$("#HomeSectionID12").css("background-color", "#ffffff");
});
$("#HomeSectionID11").click(function () {
LoadSelection(this);
$("#HomeSectionID10").css("background-color", "#ffffff");
$("#HomeSectionID12").css("background-color", "#ffffff");
});
$("#HomeSectionID12").click(function () {
LoadSelection(this);
$("#HomeSectionID10").css("background-color", "#ffffff");
$("#HomeSectionID11").css("background-color", "#ffffff");
});
注意:datalist和datalist中有三行封装在.ascx控制文件中 主页面中的每个控件都由不同的服务器端属性重复四次,因此有12个HomeSection全部按会话值设置。
如何在不改变性能和外观的情况下优化我的jquery代码?