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

Question

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

在下面我想出了 div 的名称，我在下面做的是，当点击一个 DIV 时，更改背景颜色。所以 Active div 得到另一种颜色。下面我有 JQuery 代码它可以工作，但我确信它可以以更好的方式完成.. 我可以做些什么来改进代码以使用更好的 Jquery 功能？

您可能会看到，所有 DIV 名称都以相同的约定开头...只是这些中间词是不同的 Algemeen、Juridisch、Fiscaal、Economisch、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");
    });
});

Answer 1

$(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");
        });
    });

（固定）

Answer 2

如果这些是唯一使用类 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>

Answer 3

将所有选择器（您正在触发 clcik 事件的选择器）放在一个数组中， 然后迭代该数组，并将单击事件绑定到所有选择器..这将使您的代码更短。 你可以通过这种方式让你的 resetColor() 更短一些。

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

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

resetColor(TabPanelVeiligheid_tab); 

希望对你有所帮助！！

Answer 4

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

编辑：

为所有标签容器分配一个类。

class="my_class"

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