0

我这里有这段代码，它工作得很好。这是一个简单的图像和标题，在鼠标悬停时它会显示一个描述。

    <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
    $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();
    ?>

我知道在循环内部我应该调用缩略图......但在这种情况下，幻灯片效果它应该可以正常工作，对吧？您可能会怀疑我在编码方面没有太多经验，所以我希望有人可以帮我解决这个问题！非常感谢您提前

4

1 回答 1

0

剪切并粘贴此块

<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)

于 2015-02-06T10:19:20.907 回答