associating_elements.html

	<ul id="thinger">
		<li>
			<input type="button" id="button_1" value="button 1" />
			<div id="panel_1" class="panel">Panel 1</div>
		</li>
		<li>
			<input type="button" id="button_2" value="button 2" />
			<div id="panel_2" class="panel">Panel 2</div>
		</li>
		<li>
			<input type="button" id="button_3" value="button 3" />
			<div id="panel_3" class="panel">Panel 3</div>
		</li>
	</ul>
	
	<script type="text/javascript" charset="utf-8">
		/* 
			TASK: When a button is clicked, show the related panel. 
		*/
		
		/* 
			METHOD 1: Brute force; use the ID of the clicked button 
			to look up the related panel. This requires us to have
			IDs on all of our elements.
		*/
		
		$(document).ready(function() {
			$('#thinger input').click(function() {
				// use the ID of the clicked button 
				// to figure out the ID of the 
				// corresponding panel
				var panel_id = $(this).attr('id').replace('button', 'panel');
				
				// get the corresponding panel
				$('#' + panel_id).show();
			});
		});
		
		/*
			METHOD 2: Associate elements (assuming they're in the same order)
			using $.fn.data(). Now we can handle clicks with event delegation
			because we've connected the panel with the button. Note how there's
			no longer a need for IDs on the elements.
		*/
		$(document).ready(function() {
			var $buttons = $('#thinger input');
			var $panels = $('#thinger div.panel');

			// associate each button with its panel
			$buttons.each(function(idx) {
				$(this).data('panel', $panels.eq(idx));
			});
			
			$('#thinger').click(function(e) {
				// create a jQuery object using the clicked element
				var $button = $(e.target);
				
				// make sure a button was clicked; otherwise, bail
				if (!$button.is('input')) { return; }
				
				// get the panel associated with the button
				$button.data('panel').show();
			});
		});
		
		/* 
			METHOD 3: Create a panels array based on the $buttons 
			jQuery object using $.fn.map; order is guaranteed, and we'll do 
			a lookup of the associated panel at click time. We use event
			delegation again, as well. Again, there's no need for the
			IDs on the elements.
		*/
		$(document).ready(function() {
			var $buttons = $('#thinger input');
			
			// create a $panels jQuery object using the $buttons object
			var panels = $buttons.map(function(idx, el) {
				return $(el).next('div.panel');
			});
			
			$('#thinger').click(function(e) {
				// create a jQuery object using the clicked element
				var $button = $(e.target);
				
				// make sure a button was clicked; otherwise, bail
				if (!$button.is('input')) { return; }
				
				// look up the related panel
				panels[$buttons.index($button)].show();
			});
		});
		
		/*
			OBJECT LITERAL
		*/
		
		var thinger = {
			connections : [],
			
			init : function() {
				this.el = $('#thinger').click($.proxy(this, 'handleClick'));;
				this.buttons = this.el.find('input');
				this.setupConnections();
			},
			
			setupConnections : function() {
				this.buttons.each($.proxy(function(idx, el) {
					this.connections.push($(el).next('div.panel'));
				}, this));
			},
			
			handleClick : function(e) {
				var $button = $(e.target);
				if (!$button.is('input')) { return; }
				this.connections[this.buttons.index($button)].show();
			}
		};
		
		$(document).ready(thinger.init);
	</script>