Сократите код для большого количества кнопок в Prototype - PullRequest
Новая
       15

Сократите код для большого количества кнопок в Prototype

0 голосов
/ 05 ноября 2008

У меня много кнопок, и при нажатии на другую кнопку, появляется другое изображение и текст. Я могу добиться того, чего хочу, но код такой длинный и кажется очень повторяющимся. Например: 

   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. Это довольно раздражает, и я попытался найти его в Google, и я обнаружил только наблюдаемый щелчок по всем перечисленным элементам, так что я все еще не мог понять, поскольку то, что я хочу, включает нажатие кнопки вверх при нажатии других кнопок.

Есть ли способ просто иметь универсальную функцию, которая принимает другой идентификатор, но делает то же самое? Потому что из того, что я вижу, если я могу просто заменить aa другим идентификатором, я могу уменьшить объем кода. Спасибо !!!

Ответы [ 4 ]

2 голосов
/ 05 ноября 2008

Создайте все это в функции, где вы можете просто передать ей имена 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' });
}
1 голос
/ 05 ноября 2008

Событие делегирования. Дайте всем вашим кнопкам класс (например, 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;
    }
});

И так далее ...

0 голосов
/ 05 ноября 2008

У обработчиков событий может быть аргумент, который будет установлен в качестве цели события. Тогда вы можете использовать ту же функцию: 

var clickedHandler = function(element) { 
  $(element).addClass("selected");
};
$("aa").observe('click', clickedHandler);
$("bb").observe('click', clickedHandler);

Вы также остро нуждаетесь в стилях CSS. Пожалуйста, смотрите мой ответ на предыдущий вопрос, но вы можете просто использовать шаблон для других событий.

0 голосов
/ 05 ноября 2008

Имеют ли кнопки общий контейнер? Тогда работает следующий код: 

$(container).childElements().each(function(element) {
    $(element).observe('click', function () { … });
    …
});

Кроме того, вы также можете сделать это: 

["aa", "bb", "cc"].each(function(element) { … same code … });
...