프로토 타입에서 많은 버튼에 대한 코드를 줄입니다.

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 등과 마찬가지로 새 버튼을 추가 할 때마다 Empick 기능에도 추가해야합니다. 이것은 꽤 성가신 일이며 Google을 구하려고했는데, 나열된 모든 항목을 클릭하는 것이 관찰되었다는 것을 알았으므로 다른 버튼을 클릭 할 때 원하는 것이 버튼 업이 포함되어 있기 때문에 여전히 알 수 없었습니다.

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

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