jquery - jquery 使用 php 作为选择器

Question

嗨，我正在尝试在悬停时显示一个隐藏的 div 以覆盖我的图像，并且我有一个从 wordpress 中的项目帖子动态生成的列表..显然列表类名称都是不同的..

我的选择器会是什么，以便 div 只出现在悬停的列表项上。

<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/ 那是我正在进行的便便工作

Answer 1

jQuery 提供了多种遍历 DOM 的方法，因此可以通过多种解决方案来实现，这里有一个：

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

Answer 2

好吧，通过查看您的代码，我看到有一个具有 id 的容器folio。

我们使用它：

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

那是在解决你的问题吗？

Answer 3

您可以将您的 id 存储the_id在数据属性中，然后拥有一个可用于 jQuery 选择器的类，例如：

HTML：

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

jQuery：

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