縮短原型中很多按鈕的代碼

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，我可以減少很多代碼。謝謝！！！

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

按鈕是否共用一個通用容器？然後將下面的代碼工作：

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

或者，你也可以這樣做：

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

Answer 3

事件處理程序可以有一個參數將被設置爲事件目標。然後你可以重複使用相同的功能：

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

你也迫切需要CSS樣式。請參閱我的answer以回答您的上一個問題，但您可以重複使用其他事件的模式。

Answer 4

活動代表團。給所有的按鈕類（如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; 
    } 
}); 

等等......