为什么滑动效果在循环内不起作用？

Question

我这里有这段代码，运行良好。这是一个简单的图像和标题，鼠标悬停时它会显示描述。

    <div class="imageCont">
    <div class="imgBlock thumbnail">
        <a href="<?php the_permalink(); ?>" class="link-to-post" title="<?php the_title_attribute(); ?>" ><img width="300" height="150" src="http://www.tentacle.cat/wp-content/uploads/2014/11/DSC06267_Snapseed-Custom.jpg" class=" vc_box_border_grey attachment-thumbnail" alt="cartell2">
        </a>
            <div class="undertext">
                <h3 class="whiteText upperCase"><?php the_title(); ?> </h3>
                <p class="bildText" style="display: none;"><?php the_excerpt('60'); ?></p>
            </div>
    </div>
</div>

    <script>
    jQuery(document).ready(function() {
        jQuery('.imgBlock').hover(
            function() { 
                jQuery(this).find('.bildText').slideDown(300);
            },
            function () { 
                jQuery(this).find('.bildText').slideUp(300);
            }
        );
    });</script>

正如我所说...这已经运行良好，但是当我将它放在 post-type 循环中时，滑动效果停止工作。这个 post-type 循环本身也运行良好...但我无法使这种滑动效果起作用。

     <?php
    $args = array(
        'numberposts'=>1, 
        'showpastevents'=>true,
        'orderby'=> 'eventstart',
        'order'=> 'ASC',
        'event-category' => 'portada-mini-a',
        'post_type'=>'event'
    );
    $eventloop = new WP_Query( $args );
        if ( $eventloop->have_posts() ) :?>

    <?php while ( $eventloop->have_posts() ) : $eventloop->the_post(); 
?>

 <div class="imageCont">
        <div class="imgBlock thumbnail">
            <a href="<?php the_permalink(); ?>" class="link-to-post" title="<?php the_title_attribute(); ?>" ><img width="300" height="150" src="http://www.tentacle.cat/wp-content/uploads/2014/11/DSC06267_Snapseed-Custom.jpg" class=" vc_box_border_grey attachment-thumbnail" alt="cartell2">
            </a>
                <div class="undertext">
                    <h3 class="whiteText upperCase"><?php the_title(); ?> </h3>
                    <p class="bildText" style="display: none;"><?php the_excerpt('60'); ?></p>
                </div>
        </div>
    </div>
    <script>
        jQuery(document).ready(function() {
            jQuery('.imgBlock').hover(
                function() { 
                    jQuery(this).find('.bildText').slideDown(300);
                },
                function () { 
                    jQuery(this).find('.bildText').slideUp(300);
                }
            );
        });
    </script>
    <?php
        endwhile;
        wp_reset_postdata();
    ?>

我知道在循环中我应该调用缩略图...但在这种情况下，幻灯片效果无论如何都应该起作用，对吗？正如您可能怀疑的那样，我在编码方面没有太多经验，所以我希望有人能帮我解决这个问题！非常感谢您

Answer 1

剪切并粘贴此块

<script>
    jQuery(document).ready(function() {
        jQuery('.imgBlock').hover(
            function() { 
                jQuery(this).find('.bildText').slideDown(300);
            },
            function () { 
                jQuery(this).find('.bildText').slideUp(300);
            }
        );
    });
</script>

到文件的开头。你把它放在你的循环中，所以它会被多次输出。你只需要这个块一次。我可以想象这会终止该功能，因为它会在悬停时一次执行多次。

[编辑]

使用 get_the_excerpt() 而不是 the_excerpt()，它将在您的示例中起作用。对于前 60 个字符，使用 substr(get_the_excerpt(),0,60)

为什么滑动效果在循环内不起作用？

Why the sliding effect isn't working inside a loop?

jquery

wordpress

custom-post-type

sliding

captions