Вызов нескольких функций jQuery на странице ASP.NET
У меня есть страница с тремя метками 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 id="lblWebComp" class="gridLabelDefault" onmouseover="ColorChange('lblWebComp')"
onmouseout="ColorChange('lblWebComp')" onclick="ShowHide('gvDivWC')">
Web Components
</label>
Пожалуйста, дайте мне знать, если это лучший способ для достижения этих эффектов? Разве мне не нужно исправлять функцию готовности документа в коде jQuery?
Большое спасибо!
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 в готовом документе таким же образом, как я показал выше для события щелчка.
$('.gridLabelDefault').hover(
function () { // this is the mouseOver function
$(this).addClass('gridLabel');
},
function () { // this is the mouseOut function
$(this).removeClass('gridLabel');
}
);