优化和省略一些jQuery额外代码并保留所有好处

时间:2011-02-15 07:58:16

标签: jquery asp.net

让我写下一些代码来更清楚地解释我的问题,我有一个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代码?

0 个答案:

没有答案