时间戳

首页 > 解决方案 > onchange 类别下拉列表显示功能帖子和博客列表

jquery - onchange 类别下拉列表显示功能帖子和博客列表

问题描述

我有三个功能。

  1. 第一个是从自定义帖子中显示我的类别下拉列表。

  2. 第二个是显示最新帖子（如果用户选中，我在每个帖子中添加了复选框，那么它将显示在最新帖子中）

  3. 第三个将显示我的所有帖子。

下面是我正在使用的代码。

//category dropdown
    function categoriesDropdown(){
    $categories = get_categories( array(
        'orderby' => 'name',
        'order'   => 'ASC',
        'taxonomy' => 'blogs_cat',
    ) );
     $output='';
     $output.='<select>';
    foreach( $categories as $category ) {
        $output.='<option value="'.$category->term_id.'">'.$category->name.'</option>'; 
    }
        $output.='</select>';
        return $output;
    }
    add_shortcode( 'showCategoryList', 'categoriesDropdown');
    
    // Feature blog if check box selected.
    function latestBlogView( $atts ){
          $the_query =array(
          'post_type' => 'blog',
          'post_status' => 'publish',
          'posts_per_page' => 3,
          'meta_key' => 'latestblog',
          'meta_value' => 1,
          'order'      => 'DESC'
        );
        
        $postData = '';
        // The Loop
         $featured = new WP_Query($the_query);
        $postData.='<div class="latestBlogsWrapper articlesWrapper"><ul>';
        if ($featured->have_posts()): while($featured->have_posts()): $featured->the_post();
            
        $postData.= '<li><div class="grid-item"><a href="'.get_permalink($post->ID).'">
        <div class="blogBoxwrapper"> 
        <img src="'. get_the_post_thumbnail_url($post->ID, "full").'"> 
        <div class="blogCatname"><h5>'.get_the_title($post->ID).'</h5></div>
        </div></div></a></li>'; 
        
        endwhile; else:
        $postData.="Please select the feature post check box";
    
        endif;
         $postData .= '</ul></div>';
        wp_reset_postdata();
        
        return $postData; 
    }
    add_shortcode( 'latestblogs', 'latestBlogView');
    
    // Blog list
    function BlogView( $atts ){
        $args = array(  
            'post_type' => 'blog',
            'post_status' => 'publish',
            'posts_per_page' => 30, 
            'orderby' => 'title', 
            'order' => 'DESC', 
        );    $loop = new WP_Query( $args ); 
        $data ='';
        $data.='<div class="articlesWrapper"><ul>';
        while ( $loop->have_posts() ) : $loop->the_post(); 
            $tid = $loop->ID;
            $data.= ' 
              <li>
                 <a href="'.get_permalink($tid).'">
                      <div class="blogBoxwrapper">
                         <img src="'.get_the_post_thumbnail_url($tid).'">
                            <div class="blogCatname">
                              <h5>'.get_the_title($id).'</h5>
                            </div>
                     </div>
                    </a>
            </li>'; 
        endwhile;  
        $data.='</ul>
        
        <div class="pt-5 text-center btnLoadmore"><a class="blogbtn blogbtnred loadMore" href="javascript:void(0);">Read More Blog Posts</a></div>
        </div>';
        wp_reset_postdata(); 
        return $data; 
    }
    add_shortcode( 'blogandarticles', 'BlogView');

现在我正在做的是，当用户从下拉列表中更改类别时，我必须显示与该类别相关的最新博客和博客列表。

例如。在页面加载时，我默认显示所有帖子。Movie现在我在下拉列表中有一个类别。一旦用户从下拉列表中选择了电影，我就必须在最新的博客和博客列表中显示与电影相关的帖子。

你能帮我解决这个问题吗？

标签： jquerywordpress

解决方案

我找到了我的解决方案。

在更改下拉列表中，我必须显示帖子列表和特色帖子。所以我使用了ajax。

我在 onchange 事件之外使用了以下函数，因为每当用户刷新页面时，它都会调用我的 ajax 并显示输出，无论选择什么下拉菜单。

callAjax_forLatestblog();
callAjax_forBloglist();

我使用了两个 ajax 调用，因为我必须显示两件事以及动态标题。

如果注意到这里，我在下面添加if-condition了两个函数。如果它不为空，它将检查下拉列表的值，然后它将调用此条件。

if(!empty($_REQUEST['keyword'])){
    $args['tax_query'] = array(
        array(
        'taxonomy' => 'blogs_cat',
        'field' => 'term_id',
        'terms' => sanitize_text_field($_REQUEST['keyword'])
         )
      );
    }


function categoriesDropdown(){
$categories = get_categories( array(
    'orderby' => 'name',
    'order'   => 'ASC',
    'taxonomy' => 'blogs_cat',
) );
 $output='';
 $output.='<select name="catDropdown" id="catDropdown"><option value="">Everything</option>';
foreach( $categories as $category ) {
    $output.='<option value="'.$category->term_id.'">'.$category->name.'</option>'; 
}
    $output.='</select>';

$output.='<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" crossorigin="anonymous"></script><script>     
(function($) {  // ready handler

callAjax_forLatestblog();// on page load call ajax to get the latest post
callAjax_forBloglist();// on page load call ajax to get the blog list

$("#catDropdown").change(function() {
    callAjax_forLatestblog();
    callAjax_forBloglist();
    });
    function callAjax_forLatestblog(){
     $.ajax({
        url: "/wp-admin/admin-ajax.php",
        type: "post",
        data: { action: "latestBlogView", keyword: $("#catDropdown").val() },
        success: function(data) {
         $("#latestblogs").html(data);
        }
    });
    }
    function callAjax_forBloglist(){
     $.ajax({
        url: "/wp-admin/admin-ajax.php",
        type: "post",
        data: { action: "blogList", keyword: $("#catDropdown").val() },
        success: function(data) {
         $("#blogList").html(data);
        }
    });
    }
    })(jQuery);</script>';
    return $output;
}
add_shortcode( 'showCategoryList', 'categoriesDropdown');

下面是博客列表的代码

add_action('wp_ajax_nopriv_blogList', 'blogList');
add_action('wp_ajax_blogList', 'blogList');
function blogList( $atts ){
    $args = array(  
        'post_type' => 'blog',
        'post_status' => 'publish',
        'posts_per_page' => 30, 
        //'orderby' => 'title', 
        //'order' => 'ASC', 
    );  
    if(!empty($_REQUEST['keyword'])){
    $args['tax_query'] = array(
        array(
        'taxonomy' => 'blogs_cat',
        'field' => 'term_id',
        'terms' => sanitize_text_field($_REQUEST['keyword'])
         )
      );
    }
    $loop = new WP_Query( $args ); 
    $data ='';
    $data.='<div class="articlesWrapper"><ul>';
    while ( $loop->have_posts() ) : $loop->the_post(); 
        $tid = $loop->ID;
        $data.= ' 
          <li>
             <a href="'.get_permalink($tid).'">
                  <div class="blogBoxwrapper">
                     <img src="'.get_the_post_thumbnail_url($tid).'">
                        <div class="blogCatname">
                          <h5>'.get_the_title($id).'</h5>
                        </div>
                 </div>
                </a>
        </li>'; 
    endwhile;  
    $data.='</ul></div>';
    echo $data;
     wp_die(); // it will remove 0.
}

下面是功能帖子的代码

add_action('wp_ajax_nopriv_latestBlogView', 'latestBlogView');
add_action('wp_ajax_latestBlogView', 'latestBlogView');
function latestBlogView($atts){
     $the_query =array(
      'post_type' => 'blog',
      'post_status' => 'publish',
      'posts_per_page' => 3,
      'meta_key' => 'latestblog',
      'meta_value' => 1,
      'order'      => 'DESC'
    );
    if(!empty($_REQUEST['keyword'])){
    $the_query['tax_query'] = array(
        array(
        'taxonomy' => 'blogs_cat',
        'field' => 'term_id',
        'terms' => sanitize_text_field($_REQUEST['keyword'])
         )
      );
    }
    $postData = '';
    // The Loop
     $featured = new WP_Query($the_query);
    $postData.='<div class="latestBlogsWrapper articlesWrapper"><ul>';
    if ($featured->have_posts()): while($featured->have_posts()): $featured->the_post();
    $postData.= '<li><div class="grid-item"><a href="'.get_permalink($post->ID).'">
    <div class="blogBoxwrapper"> 
    <img src="'. get_the_post_thumbnail_url($post->ID, "full").'"> 
    <div class="blogCatname"><h5>'.get_the_title($post->ID).'</h5></div>
    </div></a></div></li>'; 
    
    endwhile; else:
    $postData.="Please select the feature post check box";

    endif;
     $postData .= '</ul></div>';
    echo $postData;
     wp_die(); // it will remove 0.
}

HTML

<div id="blogList"></div>
<div id="latestblogs"></div>

推荐阅读