Example 3

Reuse the dom


				

					
					
					
					
					
					
					
					
					
					
					
					
					

					

			

			

		
JS code

				
$("img").click(function() {
			$(this).toggleClass("selected");
		});
		
$("#getSelectBtn").click(function() {
	$("#resultSelected").empty();
	var srcList = $("img.selected").map(function(i,that) {
		return that.src
	}).get();
	$("#resultSelected").append(srcList.join(", "));
});
	

			
HTML code

				
<img src="http://lorempixel.com/100/100" alt="">
<img src="http://lorempixel.com/100/100" alt="">
		.
		.
		.
<img src="http://lorempixel.com/100/100" alt="">
<img src="http://lorempixel.com/100/100" alt="">
				

			
CSS code

				
img {
	opacity: 0.5;
	transition: all 500ms;
	-moz-transition: all 500ms; /* Firefox 4 */
	-webkit-transition: all 500ms; /* Safari and Chrome */
	-o-transition: all 500ms; /* Opera */
}

.selected {
	border: 1px solid green;
	opacity: 1;
}