在WordPress中，我从api中提取数据，并使用自定义post类型在owl滑块中显示。出于某种原因，我的代码正在破坏滑块布局。我将在下面发布代码。
<form>
<section class="s-raking">
<div class="container">
<?php
$terms = get_terms( array(
\'taxonomy\' => \'ranking\',
\'hide_empty\' => false,
) );
?>
<h2 class="title-bar" data-ranking="<?php echo $terms[0]->slug; ?>">Ranking <span><?php echo $terms[0]->name; ?></span>
<div class="ranking-nav-btn">
<div class="customPrevBtn4"><i class="fa fa-angle-left"></i></div>
<div class="customNextBtn4"><i class="fa fa-angle-right"></i></div>
</div>
</h2>
<div class="row no-gutters">
<div class="col-lg-8">
<div class="slider-ranking owl-carousel">
<?php
foreach($terms as $term) { ?>
<div class="rankig-one" style=\'background:url(<?php the_field(\'bg_image\', \'term_\' .$term->term_id ); ?>) no-repeat scroll center center; background-size: cover;\' data-title="<?php echo $term->slug; ?>">
<h3><?php the_field(\'title_normal\', \'term_\' .$term->term_id ); ?> <?php if(get_field(\'title_strong\', \'term_\' .$term->term_id )) { ?><span><?php the_field(\'title_strong\', \'term_\' .$term->term_id ); ?></span><?php } ?></h3>
<ul class="ajax-content2">
<?php
$posts = get_field(\'top_players\', \'term_\' .$term->term_id );
if( $posts ): ?>
<ul>
<?php $i = \'1\'; foreach( $posts as $post): ?>
<?php setup_postdata($post); ?>
<li><a href="<?php the_permalink(); ?>"><?php echo $i; ?> <?php the_title(); ?></a></li>
<?php $i++; endforeach; ?>
</ul>
<?php wp_reset_postdata(); ?>
<?php endif; ?>
</div>
<?php } ?>
</ul><! - - end ajax-content2-->
</div>
</div>
<div class="col-lg-4">
<div class="filters-ranking">
<div class="filters-search">
<input type="text" class="quicksearch" placeholder="Encuentra a un jugador" />
<i class="fa fa-search"></i>
</div>
<div class="tabs d-flex">
<span class="tab">Ranking</span>
<span class="tab">Selecciona tu estado</span>
</div>
<div class="tab_content">
<div class="tab_item">
<div class="filters-bar">
<select class="filters-select" name="position" onchange="this.form.submit()">
<?php
$field_key = "field_5c80e92663dd1";
$field = get_field_object($field_key);
foreach ( $field[\'choices\'] as $k => $v ) {
echo \'<option value="\' . $k . \'">\' . $v . \'</option>\';
}
?>
</select>
</div>
<div class="players-results" id="ajax-content"></div>
</div>
<div class="tab_item">
<div class="players-state">
<ul>
<?php
$field_key = "field_5cebb7e973218";
$field = get_field_object($field_key);
foreach ( $field[\'choices\'] as $k => $v ) {
echo \'<li data-value="\' . $k . \'">\' . $v . \'</li>\';
}
?>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<?php
if(isset($_GET["position"])){
$position=$_GET["position"];
// echo "select position is => ".$position;
}
?>
</form>
主页的链接为
https://probeis.mx所讨论的滑块是：
在inspector工具中仔细检查时，我注意到1秒后“li”信息丢失。
编辑：
多亏了梅哈尔，我才更接近这个问题。我现在将数据保存到页面，但现在我的滑块项目都显示了2或3个项目，即使owl旋转木马设置为项目：1。我现在也丢失了滑块右侧的搜索框，如上图所示。我将把更新后的代码放在下面。
功能。php
add_action( \'wp_ajax_nopriv_players\', \'players_lpm\' );
add_action( \'wp_ajax_players\', \'players_lpm\' );
function players_lpm() {
$position = $_POST[\'position\'];
$ranking = $_POST[\'ranking\'];
$search = $_POST[\'search\'];
$state = $_POST[\'state\'];
$args = array(
\'post_type\' => \'players_lpm\',
\'posts_per_page\' => -1,
\'s\' => $search,
\'tax_query\' => array(
array(
\'taxonomy\' => \'ranking\',
\'field\' => \'slug\',
\'terms\' => $ranking
)
),
\'meta_query\' => array(
array( \'key\' => \'position\', \'value\' => $position, \'compare\' => \'LIKE\' ),
array( \'key\' => \'state\', \'value\' => $state, \'compare\' => \'LIKE\' ),
\'relation\' => \'AND\'
)
);
$the_query = new WP_Query( $args ); $i2 = \'1\';
echo \'<ul>\';
while ($the_query -> have_posts()) : $the_query -> the_post();
echo \'<li><a href="\'.get_permalink().\'"><span>\'.$i2.\'</span>\'.get_the_title().\'</a></li>\';
$i2++; endwhile; wp_reset_postdata();
echo \'</ul>\';
die();
}
add_action( \'wp_ajax_nopriv_playersmain\', \'playersmain\' );
add_action( \'wp_ajax_playersmain\', \'playersmain\' );
function playersmain() {
$position = $_POST[\'position\'];
$ranking = $_POST[\'ranking\'];
$search = $_POST[\'search\'];
$state = $_POST[\'state\'];
$args = array(
\'post_type\' => \'players_lpm\',
\'posts_per_page\' => 10,
\'s\' => $search,
\'tax_query\' => array(
array(
\'taxonomy\' => \'ranking\',
\'field\' => \'slug\',
\'terms\' => $ranking
)
),
\'meta_query\' => array(
array( \'key\' => \'position\', \'value\' => $position, \'compare\' => \'LIKE\' ),
array( \'key\' => \'state\', \'value\' => $state, \'compare\' => \'LIKE\' ),
\'relation\' => \'AND\'
)
);
$the_query = new WP_Query( $args ); $i2 = \'1\';
while ($the_query -> have_posts()) : $the_query -> the_post();
echo \'<li><a href="\'.get_permalink().\'"><span>\'.$i2.\'</span>\'.get_the_title().\'</a></li>\';
$i2++; endwhile; wp_reset_postdata();
die();
}
脚本。js公司
var owl8 = $( ".slider-ranking" );
owl8.owlCarousel({
items: 1,
loop: true,
nav:true,
animateOut: \'fadeOut\',
navText:[\'<i class="fa fa-angle-left"></i>\', \'<i class="fa fa-angle-right"></i>\'],
dots: false,
//autoplay:true,
autoplayTimeout:4000,
autoplayHoverPause:true
});
$(\'.customNextBtn4\').click(function() {
owl8.trigger(\'next.owl.carousel\', [300]);
});
$(\'.customPrevBtn4\').click(function() {
owl8.trigger(\'prev.owl.carousel\', [300]);
});
owl8.on(\'changed.owl.carousel\', function(e) {
var current = e.item.index;
var currSl2 = $(e.target).find(".owl-item").eq(current).find(".rankig-one h3").html();
$(".s-raking .title-bar span").html(currSl2);
var currSl3 = $(e.target).find(".owl-item").eq(current).find(".rankig-one").attr(\'data-title\');
$(".s-raking .title-bar").attr(\'data-ranking\', currSl3);
ranking();
});
/*for first load*/
function ranking() {
$(".filters-ranking .players-results").mCustomScrollbar("destroy");
var position = $(".filters-select option:selected").val();
var ranking = $(\'.s-raking .title-bar\').attr(\'data-ranking\');
var search = $(\'.quicksearch\').attr(\'data-search\');
var state = $(\'.players-state\').attr(\'data-state\');
$.ajax({
url : ajaxurl,
type: \'post\',
data : {
action : \'playersmain\',
position: position,
ranking: ranking,
search: search,
state: state
},
success : function( response ) {
$("#ajax-content").html(response);
$(".filters-ranking .players-results").mCustomScrollbar({
scrollButtons:{enable:true}
});
}
});
$.ajax({
url : ajaxurl,
type: \'post\',
data : {
// action : \'playersmain\',
action : \'players_lpm\',
position: position,
ranking: ranking,
search: search,
state: state
},
success : function( response ) {
$(".ajax-content2").html(response);
}
});
}
ranking();
头版。上面的php数据仍然相同。再次感谢梅哈尔让我更接近解决这个难题。
P、 这是目前为止混乱的版本图像。
