تقصير رمز لكثير من الأزرار في النموذج

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

ونفس الشيء مع ب، ج ج، الخ وفي كل مرة أقوم بإضافة زر جديد، ولست بحاجة لإضافته إلى قم بإلغاء تحديد وظيفة أيضا. هذا أمر مزعج جدا وحاولت أن جوجل انها وجدت فقط مراقبة الضغط على جميع البنود الواردة، لذلك ما زلت لم أستطع أن أعرف منذ ما أريد ينطوي على زر حتى عندما يتم النقر الأزرار الأخرى.

هل هناك أي طريقة لجعل مجرد وظيفة عامة أن يأخذ هوية مختلفة ولكنها تفعل نفس الشيء بالضبط؟ لأن من ما أستطيع أن أرى، إذا أنا يمكن أن يحل محل فقط أأ مع رقم آخر، وأنا يمكن أن تقلل كثيرا من التعليمات البرمجية. بفضل!

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