javascript - Ajax 问题基于类别在 foreach 内加载更多 CPT 循环请求

Question

我有一个 WordPress 自定义帖子类型，在它的存档页面上，我有一个基于自定义分类的 foreach 循环。对于从循环返回的每个项目，have_posts/ the_post 循环显示分配给该类别的帖子，并带有一个按钮，用于通过 Ajax 为类别 foreach 循环中的每一行请求更多帖子。

我面临的问题是，无论我按下哪个按钮，所有循环都会返回相同的结果，这不是新帖子，只是现有显示的结果覆盖了已经显示的结果。

JS for 循环识别已单击哪个 .loadmore，但所有按钮都更新了第三个 .response 的数据，似乎无法识别迭代。

我认为问题与此有关，el[i]（例如 2）和 res[i]（例如 2）之间没有相关性，但我不确定如何实现这一点。

任何提示将不胜感激:)

Ajax.js

const xhr = new XMLHttpRequest();
  const el = document.querySelectorAll('.loadmore');

  // Loop over all loadmore buttons
  for (let i = 0; i < el.length; i++) {

    el[i].addEventListener('click', e => {
      e.preventDefault();

      console.log('Which loadmore clicked: ' + [i]);

      const res = document.querySelectorAll('.response');

      // Loop over response for each output
      for (let i = 0; i < res.length; i++) {

        xhr.open('POST', WP.ajax, true);

        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;');

        xhr.onload = function () {
          if (xhr.status === 200) {

            // Update response div 
            res[i].innerHTML = xhr.responseText;

            console.log("Fired?");
            console.log('Which res: ' + [i]);
            console.log(xhr.responseText);
            // console.log(this.xhr);

            WP.current_page++;
          } else {
            console.log(this.xhr);
          }
        };

      }

      // xhr.send(data);
      xhr.send('action=loadmore&query=' + WP.posts + '&page=' + WP.current_page + '');

    },
      false
    );
  }

存档-CPT.php

$categories = get_terms('category_factsheets');

/**
 * Loop over each category 
 */
$i = 0; foreach ($categories as $category): ?>

<div class="container--slim">

  <div class="factsheet-group">
    
    <h2><?php echo $category->name; ?></h2>

    <div id="response_<?php echo $i; ?>" class="response inner">

      <?php
      $args = array(
        'tax_query' => array(
          array(
            'taxonomy' => 'category_factsheets',
            'field' => 'id',
            'terms' => $category->term_id
          )
        )
      );
      /**
       * Loop over each category to display all associated posts
       */
      if (have_posts()): query_posts( $args ); while (have_posts()): the_post(); 
        $factsheet = get_field('factsheet'); 
        ?>
        
        <div class="factsheet-item">
          <h3><?php echo $factsheet['issue_date']; ?></h3>
          <p><?php the_title(); ?></p>
          <?php if ($factsheet['pdf']): ?>
            <a href="<?php echo $factsheet['pdf']; ?>" target="_blank">View PDF</a>
          <?php endif; ?>
        </div>

      <?php endwhile; endif; ?>

    </div><!-- inner : END -->
    

    <div class="loadmore btn btn--black">View more</div>
  
  </div><!-- factsheet-group : END -->

</div><!-- container--slim : END -->

<?php $i++; endforeach;

函数.php

function factsheets_loadmore_ajax_handler() {

  $categories = get_terms('category_factsheets');

  $params = json_decode( stripslashes( $_POST['query'] ), true );
	$params['paged'] = $_POST['page'] + 1; // we need next page to be loaded
  $params['post_status'] = 'publish';
 
	// it is always better to use WP_Query but not here
	query_posts( $params );
 
	if( have_posts() ): while( have_posts() ): the_post();
    
    // the_title();
    $factsheet = get_field('factsheet'); 
    ?>
      
      <div class="factsheet-item">
        <h3><?php echo $factsheet['issue_date']; ?></h3>
        <p><?php the_title(); ?></p>
        <?php if ($factsheet['pdf']): ?>
          <a href="<?php echo $factsheet['pdf']; ?>" target="_blank">View PDF</a>
        <?php endif; ?>
      </div>

  <?php
  endwhile; endif;

	die; // here we exit the script and even no wp_reset_query() required!
}
 
add_action('wp_ajax_loadmore', 'factsheets_loadmore_ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore', 'factsheets_loadmore_ajax_handler'); // wp_ajax_nopriv_{action}

标签： javascriptajaxwordpress