Почему эффект скольжения не работает внутри цикла?

У меня есть этот код, который отлично работает. Это простое изображение и заголовок, который при наведении мыши показывает описание.

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

Я знаю, что внутри цикла я должен вызвать миниатюру... но в этом случае эффект слайда должен работать в любом случае, верно? Как вы можете подозревать, у меня не так много опыта в кодировании, поэтому я бы хотел, чтобы кто-нибудь помог мне разобраться с этим! заранее большое спасибо


wordpress jquery sliding custom-post-type captions
person user3489056    schedule 06.02.2015    source источник
comment
поместите блок сценария вне бокового цикла. Я буду работать для всех сообщений   -  person Nishit Maheta    schedule 06.02.2015
comment
Да, я также размещаю его вне цикла, и проблема остается   -  person user3489056    schedule 06.02.2015

Ответы (1)


arrow_upward
0
arrow_downward

вырезать и вставить этот блок

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

person cari    schedule 06.02.2015
comment
Эй, спасибо за ваш быстрый ответ. Теперь я помещаю его вне цикла, и проблема все еще существует. - person user3489056; 06.02.2015
comment
у вас есть URL для меня посмотреть? - person cari; 06.02.2015
comment
потому что ваш p.bildText пуст. у вас <p class="bildText"></p> <p>Esdeveniment de mostra per al lloc web del Teatre</p> вместо <p class="bildText">Esdeveniment de mostra per al lloc web del Teatre</p>. the_excerpt() в wordpress использует автоформатирование, которое включает ‹p›, который вам не нужен. используйте вместо него get_the_excerpt(). - person cari; 09.02.2015
comment
Потрясающий ! Большое спасибо ! - person user3489056; 09.02.2015