0

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

   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 功能中。这很烦人，我试图用谷歌搜索它，我只发现观察点击所有列出的项目，所以我仍然无法弄清楚，因为当点击其他按钮时我想要的涉及按钮向上。

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

4

4 回答 4

2

将其全部构建到一个函数中，您可以在其中简单地将要注册的 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' });
}
于 2008-11-05T20:30:30.520 回答
1

事件委托。给你所有的按钮一个类（例如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;
    }
});

等等...

于 2008-11-05T20:36:05.970 回答
0

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

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

或者，您也可以这样做：

["aa", "bb", "cc"].each(function(element) { … same code … });
于 2008-11-05T20:26:18.687 回答
0

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

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

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

于 2008-11-05T20:33:56.427 回答