javascript - 缩短了 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 等相同，每次添加新按钮时，我也需要将其添加到取消单击功能。这非常烦人，我尝试用谷歌搜索它，但我只发现观察所有列出的项目的点击，所以我仍然无法弄清楚，因为我想要的内容涉及单击其他按钮时按钮向上。

有没有办法让一个通用函数接受不同的 id 但做完全相同的事情？因为据我所知，如果我可以将 aa 替换为其他 id，我可以减少很多代码。谢谢!!!

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' });
}