Вызов нескольких функций jQuery на странице ASP.NET

Question

У меня есть страница с тремя метками HTML и соответствующими им сеточными представлениями ASP.NET, содержащимися в div. Сейчас, изучая jQuery, я пытаюсь достичь двух вещей:
1. Измените класс css ярлыков при наведении курсора мыши.
2. Сдвигайте вверх / вниз по сетке, нажимая на ярлыки.
Похоже, что он работает, как ожидалось, но я хотел бы знать, правильно ли я это делаю.

Мой полный код jQuery:

$(function ColorChange(ID) {            
                $("#" + ID).toggleClass("gridLabel");
});
$(function ShowHide(GID) { 
                $('#' + GID).slideToggle('slow');
});

И я вызываю эти функции из событий onmouseover, onmouseout и onclick элементов управления label, передавая идентификатор метки в качестве параметра. Как пример:

<label id="lblWebComp" class="gridLabelDefault" onmouseover="ColorChange('lblWebComp')"
                onmouseout="ColorChange('lblWebComp')" onclick="ShowHide('gvDivWC')">
                Web Components
</label>

Пожалуйста, дайте мне знать, если это лучший способ для достижения этих эффектов? Разве я не должен исправлять функцию готовности документа в коде jQuery?

Большое спасибо!

Answer 1

Стандартный стиль jQuery - это связывание всех ваших функций из jQuery в готовом документе, как вы уже догадались, уже в своем вопросе.

Так что вместо

<label id="lblWebComp" class="gridLabelDefault" onmouseover="ColorChange('lblWebComp')"
                onmouseout="ColorChange('lblWebComp')" onclick="ShowHide('gvDivWC')">

в HTML-разметке вы можете просто

<label class="gridLabelDefault">

и затем в jQuery:

$(document).ready(function() {
    $('.gridLabelDefault').click(function() { // this assigns the click to all elements with gridLabelDefault class
        // here you want to find which grid the clicked label corresponds to, as an example
        // I've used siblings, which you could use if your elements are within a shared parent div
        $(this).siblings('.grid').slideToggle('slow'); // assuming you grid has a 'grid' class
    });
});

Надеемся, это даст вам представление о структуре кода, к которой вы должны стремиться, очевидно, вам нужно будет настроить ее под свои требования. Документация jQuery в целом довольно хороша.

Что касается переключения css, из вашего примера я не совсем понимаю, какие преимущества дает это в jQuery. Просто используйте селектор hover и сделайте это в вашем CSS-файле. Однако если вы действительно хотите использовать jQuery, вы можете привязать событие hover в документе, готовом так же, как я показал выше с событием click.

$('.gridLabelDefault').hover(
    function () { // this is the mouseOver function
        $(this).addClass('gridLabel');
    }, 
    function () { // this is the mouseOut function
        $(this).removeClass('gridLabel');
    }
);