0

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?

Solomon Sam
  • 268
  • 3
  • 16

3 Answers3

0

You can add a class to the image when it is clicked, so you can make a condition to avoid appending twice the same infos. And you can easily make your code shorter:

$('#imageset img').click(function(){
    if(!$(this).hasClass('clicked')){
        var id = $(this).attr('id');
        $('ul#summary').append('<li><div id="t' + id +  '">'+this.title+'</div></br><img id="b' + id  + 'src="+this.bigimage+"/></li>');
        $(this).addClass('clicked');
    }
});

Plus, I think ids starting with a number are not allowed.

EDIT: What are valid values for the id attribute in HTML?

Community
  • 1
  • 1
romainberger
  • 4,328
  • 1
  • 31
  • 49
0

First off don't use id's that start with a number, some browsers will have a problem with that and it's not valid HTML.

I would write the JavaScript like this:

$("#imageset .swatch").click(function(){
   this.t = this.title;
   this.title = "";
   this.b = this.bigimage;
   this.bigimage = "";
   if ($('#sum_' + this.id).length === 0) {
      $("ul#summary").append("<li><div id='sum_" + this.id + "'>"+this.t+"</div></br><img id='img_" + this.id + "' src="+this.b+"/></li>");
   }
});

What it does is that it checks the DOM if the summary has not been added before, then adds it otherwise it won't add it.

albinohrn
  • 616
  • 3
  • 8
0

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! :)

Chris Kempen
  • 9,193
  • 5
  • 36
  • 52