CODEWITHSUNDEEP
jquerywordpress
Blake
Blake

Reputation: 91

jquery using php as a selector

Hi I am trying to make a hidden div appear on hover to cover my image and I have a list that is dynamically generated from project posts in wordpress..obviously the list class names are all different..

What would my selector be so that the div appears just on the list item hovered.

<li class="item-<?php the_ID() ?> <?php if(++$count%4==0) echo 'rightmost'?> ">
                        <div class="image">
                            <span>
                                <a href="<?php the_permalink() ?>">
                                    <?php
                                        if(has_post_thumbnail()){
                                            the_post_thumbnail('post-thumb');
                                        }
                                    ?>

                                </a>
                            </span>
                            <a href="<?php the_permalink() ?>" class="link">View Details</a>                    
                        </div>
<div class="content">
                            <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
                            <span class="tags">
                                <?php 
                                    // Fetching the tag names with respect to the post and displaying them
                                    $args =   array('orderby' => 'name', 'order' => 'ASC', 'fields' => 'names');
                                    echo implode(wp_get_object_terms( $post->ID, 'tag', $args),', '); 
                                ?>
                            </span>
                            <p>
                                <?php 
                                    // Using custom excerpt function to fetch the excerpt
                                    folio_excerpt('folio_excerpt_length','folio_excerpt_more');
                                 ?>
                            </p>
                        </div>
                        <div class="clear"></div>
                    </li>                                   
                <?php endwhile; ?>
            </ul>   


<script>

    $(document).ready(function() {
    $('.item-<?php the_ID() ?>').hover(
            function(){ 
            $('#folio li .content').fadeIn();
        },

            function() {
            $("#folio li .content").fadeOut();
            });
});

</script>

http://allavitart.yourtrioproject.com/portfolio/ thats my poopie work in progress

Upvotes: 0

Views: 88

Answers (3)

omma2289
omma2289

Reputation: 54639

jQuery provides multiple ways to traverse the DOM, so this can be achieved with multiple solutions, here's one:

$(document).ready(function() {
    $('#folio li').hover(function(){ 
            $(this).find('.content').fadeIn();
        },function() {
            $(this).find('.content').fadeOut();
    });
});

Upvotes: 1

inActionJackson
inActionJackson

Reputation: 1

You could store your id the_id in a data attribute, then have one class you can use for the jQuery selector, like:

HTML:

<li class="hover" data-id="<? the_id() ?>" …

jQuery:

$(".hover").hover(function() {
    // Do something with id, show div, etc.
});

Upvotes: 0

JohnnyJS
JohnnyJS

Reputation: 1472

well by reviewing your code i see there is a container that have id folio.

we use that:

jQuery("#folio ul li").hover(function(){ 
    jQuery(this).children("span").fadeOut(); 
});

Is that Solving your problem?

Upvotes: 0

Related Questions