Question

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?

Answer 1

If you’re adamant that you don’t want to use an AJAX request to fetch a greater wealth of possibly stored information from the server using something like a jQuery GET request, then you’d have to store the information somewhere on the page anyway, although if the code is being generated automatically then your life does become a lot easier and your jQuery code (at the very least!) can be simplified greatly!

Using your existing HTML code above, consider the following jQuery code:

$('#imageset img').click(function(){

    // get everything we need...
    var id = $(this).attr('id');
    var title = $(this).attr('title');
    var big_image = $(this).attr('bigimage');
    var list = $('#summary');

    // check to see if the list item already exists...
    var existing_item = $('#list_item_' + id);
    if (existing_item.length < 1)
    {
        // create the new list item...
        var new_item = $('<li />');
        new_item.attr('id', 'list_item_' + id);
        new_item.html('<div>' + title + '</div><br /><img src="' + big_image + '" />');

        // add it to the list...
        list.append(new_item);
    }
});

I hope this helps and makes sense! 🙂