Question

我在WordPress开发中遇到了一个问题，我似乎无法破解，因此能提供任何帮助。我可能错过了这么明显的东西！

我有一个WP_Query循环，该循环从名为CaseStudies的自定义分类法中获取项目。我在这些项目下面有一个“查看更多”按钮，单击该按钮时使用Ajax加载更多项目。单击的每个单独的分类法项目都会在其顶部切换div，并在其中包含相关内容。在这个切换的div中，我试图使用上一个和下一个按钮来显示图库。此画廊已经在其他页面上进行了测试，并且可以完美运行，只是不在此页面上。

无论是我的“高级自定义字段”图像还是纯文本，似乎都无法显示在此页面上价值互换子DIV中的任何内容。

这是循环的代码：

 <div id="ajax-posts" class="row">
    <?php
    $args = array(
  'post_type'   => 'casestudies',
  'post_status' => 'publish',
 );

$casestudies = new WP_Query( $args );
if( $casestudies->have_posts() ) :
?>


        <?php
        $postsPerPage = 4;
        $args = array(
                'post_type' => 'casestudies',
                'posts_per_page' => $postsPerPage,
                'cat' => 0
        );

        $loop = new WP_Query($args);

        while ($loop->have_posts()) : $loop->the_post();

    ?>
 <div class="case-open-container">
     <div class="case-toggle">OPEN</div>
         <div class="case-popup">
             <div id="case-carousel" class="case-study-carousel">
                <div class="case-header">
                <h3><?php the_title(); ?></h3>
            <div class="value-toggle">
            <a id="prev"> PREV </a>
            <a id="next"> NEXT </a>
            </div>
                </div>

            <div class="value-swap">
    <?php $images = get_field('case_gallery'); ?>
    <?php foreach( $images as $image ): ?>
    <div class="value-swap-individual">
<img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" />
                </div>
       <?php endforeach; ?>         
            </div>
    </div>  
  </div>
     </div>

     <?php
            endwhile;
    wp_reset_postdata();
     ?>
      </div>
<?php
else :
  esc_html_e( 'No case studies posted yet!', 'text-domain' );
endif;
?>

</div>
</div>
<div id="more_posts" class="view-more">
    <h3>
        View more work 
    </h3><p class="down-arrow">
    &#x25BC;
    </p>
</div>

$(document).ready(function(){
$(".value-swap div").each(function(e) {
    if (e != 0)
        $(this).hide();
});

$("#next").click(function(){
    if ($(".value-swap div:visible").next().length != 0)
        $(".value-swap div:visible").next().show().prev().hide();
    else {
        $(".value-swap div:visible").hide();
        $(".value-swap div:first").show();
    }
    return false;
});

$("#prev").click(function(){
    if ($(".value-swap div:visible").prev().length != 0)
        $(".value-swap div:visible").prev().show().next().hide();
    else {
        $(".value-swap div:visible").hide();
        $(".value-swap div:last").show();
    }
    return false;
});
});

我想念什么或做错什么了？

Answer 1

您的内容正在从ajax加载，因此只需将JS从git config --global --unset commit.gpgsign修改为click。

由于您可能具有动态生成的元素（例如，来自AJAX调用），因此您可能希望具有以前绑定到同一元素选择器的相同点击处理程序，然后使用on来“删除” click事件（）和选择器参数

on click

jQuery上一个和下一个切换库在WP Query Loop中不起作用

1 个答案: