Javascript 缩短原型中许多按钮的代码_Javascript_Button_Prototypejs_Mouseevent

Javascript 缩短原型中许多按钮的代码

javascript button

Javascript 缩短原型中许多按钮的代码,javascript,button,prototypejs,mouseevent,Javascript,Button,Prototypejs,Mouseevent,我有很多按钮，通过点击不同的按钮，会出现不同的图像和文本。我可以实现我想要的，但是代码太长了，而且看起来很重复。例如： var aaClick = false; $("aa").observe('click', function() { unclick(); $('characterPic').writeAttribute('src',"aa.jpg"); $('characterBio').update("aatext");

我有很多按钮，通过点击不同的按钮，会出现不同的图像和文本。我可以实现我想要的，但是代码太长了，而且看起来很重复。例如：

   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，但做完全相同的事情？因为从我所看到的，如果我可以用其他id替换aa，我可以减少很多代码。谢谢

按钮是否共享一个公共容器？那么下面的代码就可以工作了：

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

或者，您也可以执行以下操作：

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

按钮是否共享一个公共容器？那么下面的代码就可以工作了：

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

或者，您也可以执行以下操作：

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

将其全部构建到一个函数中，您只需将要注册的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' });
}

将其全部构建到一个函数中，您只需将要注册的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' });
}

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

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

您还迫切需要CSS样式。请参阅我对上一个问题的回答，但您可以将该模式重新用于其他事件。

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

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

您还迫切需要CSS样式。请参阅我对上一个问题的回答，但您可以将该模式重新用于其他事件。

事件委派。给你所有的按钮一个类（例如

yourButtonClass

），然后

等等…

事件委派。给你所有的按钮一个类（例如

yourButtonClass

），然后

等等……

ul也算是一个容器吗？我的按钮是这样的