jQuery and WordPress - append "the_content" in WordPress Template

I am trying to use WordPress and jQuery together in a WordPress template. Basically, what I hav开发者_JAVA百科e, is when hovering over an item on the page, for example " - another DIV is appended to this, lets call it "".

What I need, is for the WordPress Post Content to appear inside this appended "item-content" DIV.

Here is an example of my code and what I've tried, I need help finding a working solution:

WordPress Code:

<?php if(have_posts()):?>
<?php while(have_posts()):the_post();?>
     <div class="item"></div>
<?php endwhile;?>
<?php endif;?>

jQuery Code:

$(".item").live("mouseenter", function() {
//code to show description
$(this).append('<div class="item-content"><?php the_content();?></div>');

});

This didn't seem to work, so I'm sure I'm approaching this entirely wrong, can someone tell me how to do it?

Please note that there will be more than one item on the page, so the append must happen within the WordPress Loop so the correct content is appended to the correct item - I hope that makes sense.

Thanks Zach

If your jQuery is in an external Javascript file, you can't use Wordpress functions (or any php, for that matter) in your code.

I think your code would work if you put your <script></script> within the Wordpress loop itself in your PHP file, but I don't think that would be the best way to achieve what you're looking for.

It sounds like you're trying to achieve a simple-ish show/hide effect on hover. Why don't you do something like this:

PHP

Print all of your PHP content at once. No need to physically append it with your Javascript later on; rather just show and hide it.

<?php if(have_posts()):while(have_posts()):the_post(); ?>
     <div class="item">
          <div class="item-content">
               <?php the_content();?>
          </div>
     </div>
<?php endwhile; endif; ?>

CSS

Hide your .item-content divs from the start

.item-content{display:none;}

jQuery

Finally, in your jQuery, write a show/hide hover function for your .item divs. (Note: if you put your jQuery code inside jQuery(document).ready(function(){ });, you shouldn't need to use "live" at all.)

    jQuery(document).ready(function(){
         jQuery('.item').hover(
              function(){
                   jQuery(this).children('.item-content').show();
              }, //hover in
              function(){
                   jQuery(this).children('.item-content').hide();
              } //hover out
         ); 
     });