在同一个div jQuery中获取内容

Question

I've got a gallery on my website with each of them a unique ID. I'm trying to get this idea to work: Click on the first image = the content of first image. Click on the second image = the content of second image.. etc etc.

Currenlty i've set each image with a unique id as seen below:

echo "<img src='http://bsc.ua.edu/wp-content/uploads/2012/01/white-placeholder-100x100.jpg' data-original='$thumbnail[0]' width='$thumbnail[1]' height='$thumbnail[2]' class='lazygallery' id='$thumb_id'/>";

And with jQuery i can get all content in the screen, one for one. So if I click img1 I get content 1.

Got 2 loops, one for the thumbnails and one for the content: Thumbnail:

echo '<div class="gallery">';
while ($loop->have_posts()) : $loop->the_post($post->ID);
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'gallery-thumb', true, '');
$thumb_id = get_the_ID();
echo "<img src='http://bsc.ua.edu/wp-content/uploads/2012/01/white-placeholder-100x100.jpg'  data-original='$thumbnail[0]' width='$thumbnail[1]' height='$thumbnail[2]' class='lazygallery'  id='$thumb_id'/>";
endwhile;
echo '</div>';

The content loop is almost the same but then just other functions in side it (like the_content(), and a bunch of custom stuff).

My script currently:

<script>
    $(document).ready(function () {
        $('#<?php echo $thumb_id ?>').on('click', function () {
            var idimg = $(this).attr('id');

            alert('Id: ' + idimg);
            $('.content_<?php echo $thumb_id ?>').toggle();

        });
    });
</script>

Full Question How can I get the script too work like this: Img1 gets clicked - show Content1 Img2 gets clicked - empty the div, then set Content2 Img3 gets clicked - empty the div, then set Content3

Answer 1

We first need to make a 'display' div which is always visible.

Eg:

 <div id="information"></div>

With CSS such as this:

 #information {
     position:fixed;
     margin-top:50px;
     margin-left:50px;
     background-color:grey;
 }

This div will display the information of the images we click on.

Now to actually update this div with the information, we do the following:

$(document).ready(function () {
     $('#<?php echo $thumb_id ?>').on('click', function () {
         // get the correct content id
         var idimg = $(this).attr('id');
         var contentId = '.content_' + idimg;  

         // update information div
         $('#information').html($(contentId).html());
     });
});