缩短Prototype中许多按钮的代码

Question

我有很多按钮，点击不同的按钮，会出现不同的图像和文字。我可以实现我想要的，但代码很长，看起来非常重复。 例如：

   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等相同，每次添加新按钮时，我都需要将其添加到unlick功能中。这非常令人讨厌，我试图谷歌它，我只发现观察点击所有列出的项目，所以我仍然无法弄清楚，因为我想要什么涉及点击其他按钮时按钮。

有没有办法让一个泛型函数采用不同的id，但做同样的事情？因为从我所看到的，如果我可以用其他id替换aa，我可以减少很多代码。感谢!!!

Answer 1

将它全部构建到一个函数中，您可以在其中简单地传递要注册的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' });
}

Answer 2

活动代表团。给所有按钮一个类（例如 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;
    }
});

等等......

Answer 3

事件处理程序可以具有将设置为事件目标的参数。然后你可以重用相同的功能：

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

你也迫切需要CSS样式。请参阅我之前的问题回答，但您可以将模式重用于其他事件。

Answer 4

按钮是否共享一个公共容器？然后以下代码工作：

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

或者，你也可以这样做：

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