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 に答える