jQuery गठबंधन बयान?

Question

मैं ... .. इन बयानों को आसान बनाने में कर सकते हैं कैसे, बजाय 34 करने के लिए सभी तरह से upt गिनती करने के लिए हो रही है और 34 अलग बयान होने के

$('a#timeline-2010-lnk1').click(function() { 
    $('#timeline-2010-1').show(); 
    return false; 
    }); 

$('a#timeline-2010-lnk2').click(function() { 
    $('#timeline-2010-2').show(); 
    return false; 
    }); 

$('a#timeline-2010-lnk3').click(function() { 
    $('#timeline-2010-3').show(); 
    return false; 
    }); 

$('a#timeline-2010-lnk4').click(function() { 
    $('#timeline-2010-4').show(); 
    return false; 
    }); 

Answer 1

$("a[id^=timeline-2010-lnk]").live("click", function() { 
    var num = this.id.split(/-(?:lnk)?/).pop(); 
    $('#timeline-2010-'+num).show(); 
    return false; 
}); 

अधिक कुशल क्योंकि यह delegate()/live() उपयोग करता है। कई क्लिक हैंडलर को जोड़ने के बजाय, एक सामान्य हैंडलर को सामान्य पूर्वजों नोड पर रखा जाता है, जो ईवेंट पर क्लिक करें।

@rochal pointed out के रूप में, सभी तत्वों के लिए एकल वर्ग का नाम और दो तत्वों (माता-पिता/आदि के माध्यम से) के बीच संबंधों का लाभ उठाने के लिए और भी उपयुक्त हो सकता है। हालांकि, यदि आप कर सकते हैं, तो आपको अभी भी हैंडलर के लिए लाइव() या प्रतिनिधि() का उपयोग करने पर विचार करना चाहिए। तब

<a href="#" class="clicker">Text 1</a> 
<a href="#" class="clicker">Text 2</a> 
<a href="#" class="clicker">Text 3</a> 
<a href="#" class="clicker">Text 4</a> 
<a href="#" class="clicker">Text 5</a> 
... 

, तुम सब करने की ज़रूरत है:

Answer 2

हर तत्व के लिए एक आम className जोड़ें:

<a href="#" id="timeline-2010-lnk1" class="clicker">Text 1</a> 
<a href="#" id="timeline-2010-lnk2" class="clicker">Text 2</a> 
<a href="#" id="timeline-2010-lnk3" class="clicker">Text 3</a> 
<a href="#" id="timeline-2010-lnk4" class="clicker">Text 4</a> 
<a href="#" id="timeline-2010-lnk5" class="clicker">Text 5</a> 
... 

उसके बाद, आप अपने HTML को आसान बनाने में कर सकता है, और आईडी की सभी को एक साथ छुटकारा :

:

$('.clicker').click(function() { 
    $(this). /* parent? sibling? I'd have to see your code */ .show(); 
    return false; 
}); 

कोड में मेरी टिप्पणी के बारे में नोड 0

मुझे लगता है कि #timeline-2010-[X] आप दिखाना चाहते हैं div किसी प्रकार का है, इसलिए आईडी फिर से उपयोग करने के बजाय, एक वर्ग लागू करते हैं और उपयोग करने .siblings() या .find() आदि

Answer 3

जब तक आप उपयोग कर रहे हैं के रूप में jQuery, जैसे कुछ कोशिश इस:

$('a[id^=timeline-2010-lnk]').click(function() { 
    var id = '#' + this.id.replace(/lnk/, ''); 
    $(id).show(); 
    return false; 
}); 

यह सभी लिंक जिसका id गुण "समय-2010-lnk" के साथ शुरू होता आकर्षित करने तथा क्लिक करें घटना जोड़ देती है। आपको लिंक की आईडी से "lnk" भाग को हटाकर संबंधित आईडी मिलती है।

यहाँ एक डॉक्टर के लिए चयनकर्ता "विशेषता के साथ शुरू होता है": http://jsfiddle.net/eL3Yw/

Answer 4

आप Luca तरह का सुझाव दिया है पहले (नष्ट एक for पाश का उपयोग कर सकते हैं: http://api.jquery.com/attribute-starts-with-selector/

साथ ही, यहाँ एक सरल कार्रवाई में इस विधि दिखा डेमो है)। लेकिन आपको चीजों को सही रखने के लिए एक सहायक "स्व-चालान समारोह" बनाना होगा:

for(var i=1; i<=34; i++) { 
    (function(index){ 
     $('a#timeline-2010-lnk'+index).click(function() { 
      $('#timeline-2010-'+index).show(); 
      return false; 
     }); 
    })(i); 
}​ 

वह क्यों है? जावास्क्रिप्ट में केवल function scope है और block scope अन्य सी-जैसी भाषाओं में नहीं है। तो ifor-loop के दायरे से बाध्य नहीं है closure functions से पहले आप click पर ईवेंट हैंडलर के रूप में बना रहे हैं, सभी i के संदर्भ में होंगे।

एक नया फ़ंक्शन बनाकर जो रनटाइम पर स्वयं को आमंत्रित करता है, तो आप इस समस्या को हल कर सकते हैं।

Answer 5

$ के साथ एक स्टार्टविथ विशेषता चयनकर्ता का उपयोग करें।प्रत्येक

$('a[id^=timeline-2010-lnk]').each(function() { 
    var idx = $(this).attr('id').match(/\d+$/); 

    if (idx !== null) { 
     $(this).click(function() { 
      $('#timeline-2010-' + idx[0]).show(); 
      return false; 
     }); 
    } 
});