Сократите код для большого количества кнопок в Prototype
-
06-07-2019 - |
Вопрос
У меня много кнопок, и если нажать на другую кнопку, появится другое изображение и текст. Я могу добиться того, чего хочу, но код такой длинный и кажется очень повторяющимся. Например:
var aaClick = false;
$("aa").observe('click', function() {
unclick();
$('characterPic').writeAttribute('src',"aa.jpg");
$('characterBio').update("aatext");
$('aa').setStyle({ color: '#FFFFFF' });
aaClick = true;
});
$("aa").observe('mouseover', function() {
if (!aaClick) $('aa').setStyle({ color: '#FFFFFF' });
});
$("aa").observe('mouseout', function() {
if (!aaClick) $('aa').setStyle({ color: '#666666' });
});
function unclick() {
aaClick = false;
$('aa').setStyle({ color: '#666666' });
}
То же самое с bb, cc и т. д. и каждый раз, когда я добавляю новую кнопку, мне нужно добавить ее и в функцию unclick. Это довольно раздражает, и я попытался прогуглить его, и я обнаружил только наблюдаемый щелчок по всем перечисленным элементам, поэтому я все еще не мог понять, так как то, что я хочу, включает нажатие кнопки вверх при нажатии других кнопок. Р>
Есть ли способ просто использовать универсальную функцию, которая принимает другой идентификатор, но делает то же самое? Потому что из того, что я вижу, если я могу просто заменить aa другим идентификатором, я могу уменьшить объем кода. Спасибо !!!
Решение
Соберите все в функцию, где вы можете просто передать ей имена DIV, которые вы хотите зарегистрировать. Пока вы согласны с вашими именами .jpg, это должно работать.
var clicks = []
function regEvents(divName) {
$(divName).observe('click', function() {
unclick(divName);
$('characterPic').writeAttribute('src',divName+".jpg");
$('characterBio').update(divName"text");
$(divName).setStyle({ color: '#FFFFFF' });
clicks[divName] = true
});
$(divName).observe('mouseover', function() {
if (!clicks[divName]) $(divName).setStyle({ color: '#FFFFFF' });
});
$(divName).observe('mouseout', function() {
if (!clicks[divName]) $(divName).setStyle({ color: '#666666' });
});
}
function unclick(divName) {
clicks[divName] = false;
$(clicks[divName]).setStyle({ color: '#666666' });
}
Другие советы
Делегирование мероприятия. Дайте всем вашим кнопкам класс (например, yourButtonClass
), а затем ...
var clicks = [];
$('.yourButtonClass').each(function(button) {
clicks.push(button.id);
});
$(document).observe('click', function(e) {
// If your click registered on an element contained by the button, this comes in handy...
var clicked = e.element().up('.yourButtonClass') || e.element();
if(clicked.hasClassName('.yourButtonClass')) {
unclick();
$('characterPic').writeAttribute('src', clicked.id + '.jpg');
$('characterBio').update(clicked.id + 'text');
$(clicked).setStyle({ color: '#FFFFFF' });
clicks[clicked.id] = true;
}
});
И так далее ...
У обработчиков событий может быть аргумент, который будет установлен в качестве цели события. Тогда вы можете использовать ту же функцию:
var clickedHandler = function(element) {
$(element).addClass("selected");
};
$("aa").observe('click', clickedHandler);
$("bb").observe('click', clickedHandler);
Вы также остро нуждаетесь в стилях CSS. Посмотрите мой ответ на предыдущий вопрос, но Вы можете просто использовать шаблон для других событий.
Кнопки имеют общий контейнер? Тогда работает следующий код:
$(container).childElements().each(function(element) {
$(element).observe('click', function () { … });
…
});
Кроме того, вы также можете сделать это:
["aa", "bb", "cc"].each(function(element) { … same code … });