Question

我有一个类似Tumblr的博客功能，可以在div中显示一些图像。对于使用循环的自定义post-type包含的任意数量的帖子重复此操作，如下所示：

<?php

        // The Arguments
        $args = array(
            'post_type' => 'strange',
            'posts_per_page' =>-1, 
            'order_by' => 'menu_order'

        );

        $c = 0; // this starts the count at the beginning
        $class = ''; // standard is no class

        // The Query
        $the_query = new WP_Query( $args ); ?>

        <?php

        // If we have the posts...
        if ( $the_query->have_posts() ) : ?>

        <!-- Start the loop the loop --> 
            <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
            $c++; // this makes the loop count each post 
            if ( $c == 1 ) $class .= ' current'; // if the item is the first item, add class current
            else $class = ''; // if it's not the first item, don't add a class 
            ?>

                <div id="strange-container" class="strange-container <?php echo $class; ?>">    

                    <img src="<?php the_field('strange-img'); ?>" alt="<?php the_title(); ?>" />

                    <span><?php the_field('strange-text'); ?></span>

                </div>

            <?php endwhile; endif; // end of the loop. ?>

        <?php wp_reset_postdata(); ?>

我在页面顶部有一个导航箭头。单击时，我希望它将用户滚动到循环中的div。我有这个工作使用这个jQuery，当你单击箭头时添加一个类/从每个div中删除一个类：

 jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.


$('div.strange-container').first();

$('a.display').on('click', function(e) {
e.preventDefault();

  var t = $(this).text(),
  that = $(this);

if (t === '↓' && $('.current').next('div.strange-container').length > 0) {
    var $next = $('.current').next('.strange-container');
    var top = $next.offset().top;

    $('.current').removeClass('current');

    $('html, body').animate({
      scrollTop: top     
    }, function () {
           $next.addClass('current');
    }); // not using this portion for a previous button but left it in anyway just in case
 } else if (t === 'prev' && $('.current').prev('div.strange-container').length > 0) {
    var $prev = $('.current').prev('.strange-container');
    var top = $prev.offset().top;

    $('.current').removeClass('current');

    $('body').animate({
      scrollTop: top     
    }, function () {
           $prev.addClass('current');
    });
 } 
 });

 });

问题：

用户完全点击页面上的现有帖子后，即使用户向上滚动到页面顶部，箭头也不会重置并且不再有效。是否还有另一种方法可以实现这一点，即在用户一次性完成帖子之后，不会使向下箭头导航失效？

或者，有没有办法在用户滚动到页面底部（或浏览所有帖子后）隐藏向下箭头导航？

Answer 1

经过几个小时寻找合适的解决方案后，我偶然发现了这个问题：Scroll to div on click, loop around at end

我修改了小提琴，它完全符合我的目的：

https://jsfiddle.net/9x335kzg/25/

var curr_el_index = 0;
var els_length = $(".section").length;

$('.btnNext').click(function () {
  curr_el_index++;
  if (curr_el_index >= els_length) curr_el_index = 0;
$("html, body").animate({
    scrollTop: $(".section").eq(curr_el_index).offset().top - 20
  }, 700);
});

如果有人不介意向我解释当用户点击div的结尾时这个脚本如何强制循环，我真的很感激我更多地了解了这个我偶然发现的解决方案。

在页面上的Wordpress循环中从帖子滚动到帖子，显示所有帖子

1 个答案: