Как улучшить этот код интеллигентным способом в Jquery, чтобы изменить фоновый код DIV

Question

У меня есть 6 div, когда пользователь нажимает на 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

Поместите все ваши селекторы (для которых вы запускаете событие clcik) в массив, затем итерируйте этот массив и свяжите событие click со всеми вашими селекторами, что сделает ваш код короче.таким образом вы можете сделать бит resetColor () короче ..

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

и затем передать эти средние слова этой функции, как показано ниже (просто пример).

resetColor(TabPanelVeiligheid_tab); 

надеюсь, это вам немного поможет !!

Answer 3

Если это единственные div, которые используют класс ajax__tab_outer, вы можете сделать что-то вроде этого:

<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 4

Я бы отошел от AjaxToolkit и заменил бы все на jQuery. Добавьте пользовательский класс к сгенерированным элементам управления и привяжите события к этому классу. Затем вы можете использовать ключевое слово "this" для работы с элементом, по которому щелкнули.

EDIT:

Назначьте класс всем вашим контейнерам вкладок.

class = "my_class"

Затем в привязке событий добавьте $('.my_class').live('click', myFunctionToChangeColours); Вам решать, нужно ли вам делать .live или .bind. После этого в myFunctionToChangeColours вы будете использовать «this», о котором я упоминал ранее, чтобы изменить цвет вкладки, на которую вы нажали.