Hi Im working on a project where on clicking an image will generate a summary about the image clicked. There is about 50 images that can be clicked.I want to append the summary in a list and I want to filter it so there wont be multiple appends if i click the image twice.
Here is the code for the html
<div id="imageset">
<img id="001" class="swatch" src="1.jpg" title="swatch 1" bigimage="1b.jpg"/>
<img id="002" class="swatch" src="2.jpg" title="swatch 2" bigimage="2b.jpg"/>
<img id="003" class="swatch" src="3.jpg" title="swatch 3" bigimage="3b.jpg"/>
<img id="004" class="swatch" src="4.jpg" title="swatch 4" bigimage="4b.jpg"/>
....
</div>
<ul id="summary">
</ul>
Here is the jQuery code
$("#001").click(function(){
this.t = this.title;
this.title = "";
this.b = this.bigimage;
this.bigimage = "";
$("ul#summary").append("<li><div id='t001'>"+this.t+"</div></br><img id='b001' src="+this.b+"/></li>");
});
$("#002").click(function(){
this.t = this.title;
this.title = "";
this.b = this.bigimage;
this.bigimage = "";
$("ul#summary").append("<li><div id='t002'>"+this.t+"</div></br><img id='b002' src="+this.b+"/></li>");
});
$("#003").click(function(){
this.t = this.title;
this.title = "";
this.b = this.bigimage;
this.bigimage = "";
$("ul#summary").append("<li><div id='t003'>"+this.t+"</div></br><img id='b003' src="+this.b+"/></li>");
});
........
and it goes on and on... Is there a way to simplify these codes? and if so how do i add an if and else statement to filter out if the content is already appended?