如何在Jquery中以智能的方式改进此代码，以更改DIV的后台代码

How to improve this code in intelligente way in Jquery to change the background code of DIV

本文关键字：代码 后台 DIV 方式改 Jquery 智能      更新时间：2023-09-26

我有6个div，当用户单击div时，它会显示div的内容。（我使用的是ASPX-Ajaxtabpanel）。

下面我计算出了div的名称，下面我要做的是，当单击div时，更改背景颜色。所以Activediv得到了另一种颜色。下面我有JQuery代码，它可以工作，但我相信它可以用更好的方式完成。。我可以做些什么来改进代码以使用Jquery的更好功能？

正如您可能看到的，所有DIV名称都以相同的约定开头。。。只是这些中间词是不同的Algemeen，Juridisch，Fiscaal，Economicsch，Veiligheid。。。

请建议我如何改进代码。。。。

<script language="javascript" type="text/javascript">
function resetColor() {
//set all background colors of Div to blue
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelAlgemeen_tab .ajax__tab_outer").css("background-color", "#edf2fb");
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelJuridisch_tab .ajax__tab_outer").css("background-color", "#edf2fb");
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelSociaal_tab .ajax__tab_outer").css("background-color", "#edf2fb");
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelFiscaal_tab .ajax__tab_outer").css("background-color", "#edf2fb");
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelEconomisch_tab .ajax__tab_outer").css("background-color", "#edf2fb");
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelVeiligheid_tab .ajax__tab_outer").css("background-color", "#edf2fb");
}
$(document).ready(function() {
  //Change the ACTIVE div background color
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelAlgemeen_tab").click(function() {
        resetColor();
        $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelAlgemeen_tab .ajax__tab_outer").css("background-color", "#80FE80");
    });
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelJuridisch_tab").click(function() {
    resetColor();
        $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelJuridisch_tab .ajax__tab_outer").css("background-color", "#80FE80");
    });
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelSociaal_tab").click(function() {
    resetColor();
        $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelSociaal_tab .ajax__tab_outer").css("background-color", "#80FE80");
    });
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelFiscaal_tab").click(function() {
    resetColor();
        $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelFiscaal_tab .ajax__tab_outer").css("background-color", "#80FE80");
    });
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelEconomisch_tab").click(function() {
    resetColor();
        $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelEconomisch_tab .ajax__tab_outer").css("background-color", "#80FE80");
    });
    $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelVeiligheid_tab").click(function() {
    resetColor();
        $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelVeiligheid_tab .ajax__tab_outer").css("background-color", "#80FE80");
    });
});


$(function () {
        $("span[id$='_tab']", "#<%= TabContainer1.ClientID %>").click(
        function () {
            $(".ajax__tab_outer", "#<%= TabContainer1.ClientID %>").css("background-color", "#edf2fb");
            $(".ajax__tab_outer", this).css("background-color", "#80FE80");
        });
    });

（固定）

如果这些是唯一使用类ajax__tab_outer的div，您可以执行以下操作：

<script language="javascript" type="text/javascript">
function resetColor() {
   $(".ajax__tab_outer").css("background-color", "#edf2fb");
}
function changeColor() {
   resetColor();
   $(this).find(".ajax__tab_outer").css("background-color", "#80FE80");
}
$(document).ready(function() {
   // Bind all the divs to the changeColor function
   $("#dnn_ctr8192_ViewWebShop_TabContainer1_TabPanelVeiligheid_tab").click(changeColor);
   ...
}
</script>

将所有选择器（在其上触发clcik事件）放在一个数组中，然后迭代该数组，并将click事件绑定到所有选择器。。这将使您的代码更短。你可以用这种方式缩短你的resetClor（）。。

function resetColor(handler){
 $("#dnn_ctr8192_ViewWebShop_TabContainer1_"+handler+".ajax__tab_outer").css("background-color", "#edf2fb");
}

然后像这样把中间的单词传给那个函数（只是一个例子）。

resetColor(TabPanelVeiligheid_tab);

希望对你有所帮助！！

我会离开AjaxToolkit，用jQuery替换所有东西。将自定义类添加到生成的控件中，并将事件绑定到该类。然后，您可以使用"this"关键字来处理已单击的元素。

编辑：

为所有选项卡容器分配一个类。

class="my_class"

然后在事件绑定中添加$('.my_class').live('click', myFunctionToChangeColours);。这取决于您是否需要执行.live或.bind。在此之后，在myFunctionToChangeColours中，您将使用我之前提到的"this"来更改您单击的选项卡的颜色。

相关文章：