प्रोटोटाइप में बटन का एक बहुत के लिए कोड को इतना छोटा

वोट
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, सीसी, आदि और हर बार मैं एक नया बटन जोड़ने के साथ एक ही बात है, मैं इसे जोड़ने के लिए समारोह अनचेक करने के साथ ही जरूरत है। यह सुंदर कष्टप्रद है और मैं इसे गूगल की कोशिश की, और मैं केवल सभी सूचीबद्ध वस्तुओं पर क्लिक निरीक्षण में पाया गया है, इसलिए मैं अभी भी जो मैं चाहता बटन शामिल है जब अन्य बटन क्लिक किया जाता है, क्योंकि यह पता लगाने नहीं कर सका।

वहाँ किसी भी तरह से बस सटीक एक ही बात एक सामान्य समारोह है कि अलग अलग आईडी लेता है, लेकिन ऐसा करने के लिए है? क्योंकि क्या से मैं देख सकता हूँ, अगर मैं सिर्फ अन्य आईडी के साथ आ जगह ले सकता है, मैं कोड का एक बहुत कम कर सकते हैं। धन्यवाद!!!

05/11/2008 को 21:18
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


4 जवाब

वोट
0

बटन एक आम कंटेनर साझा करते हैं? उसके बाद निम्न कोड काम करता है:

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

वैकल्पिक रूप से, आप भी ऐसा कर सकते हैं:

["aa", "bb", "cc"].each(function(element) { … same code … });
05/11/2008 को 21:26
का स्रोत उपयोगकर्ता

वोट
2

यह सब एक समारोह जहां आप बस इसे DIVs आप पंजीकृत करना चाहते के नाम पारित कर सकते हैं में बनाएँ। जब तक आप अपने .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' });
}
05/11/2008 को 21:30
का स्रोत उपयोगकर्ता

वोट
0

ईवेंट हैंडलर्स एक तर्क है कि घटना लक्ष्य पर सेट हो जाएगा हो सकता है। तो फिर तुम एक ही समारोह का पुन: उपयोग कर सकते हैं:

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

आप सीएसएस स्टाइल के लिए बेताब जरूरत में भी कर रहे हैं। कृपया मेरे देखने जवाब अपने पिछले प्रश्न के लिए, लेकिन तुम सिर्फ अन्य घटनाओं के लिए पैटर्न का पुन: उपयोग कर सकते हैं।

05/11/2008 को 21:33
का स्रोत उपयोगकर्ता

वोट
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;
    }
});

और इसी तरह...

05/11/2008 को 21:36
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more