我正在尝试获取每个手风琴的帖子缩略图图像，或者在循环外部显示手风琴帖子缩略图。
目前，它的设置图像为空，但我需要每个拇指代表当前点击的手风琴。
当每个accordion click函数都应该在<div class=" image active"> 根据手风琴上的帖子id？
现在的问题是jquery 函数不是add active class 到<div class="image"> 每次手风琴演奏完cick之后？
Jquery
$(\'.heading-accordion .top\').on(\'click\', function () {
var $question = $(this).closest(\'.heading-accordion \');
$(\'.heading-accordion.open\').not($question).each(function () {
var $this = $(this);
$this.removeClass(\'open\');
$this.find(\'.bottom\').slideUp();
});
if ($question.hasClass(\'open\')) {
$question.removeClass(\'open\');
$question.find(\'.bottom\').slideUp();
} else {
$question.find(\'.bottom\').slideDown(function () {
$question.addClass(\'open\');
});
}
});
$(\'.change-image\').on(\'click\', function () {
var targetImage = parseInt($(this).attr(\'data-image\'));
$(\'.image-wrapper .image.active\').removeClass(\'active\');
$($(\'.image-wrapper .image\').get(targetImage)).addClass(\'active\');
});
$(\'.accordion-steps .change-image\').on(\'click\', function () {
var targetImage = parseInt($(this).attr(\'data-image\'));
$(\'.accordion-steps .image-wrapper .image.active\').removeClass(\'active\');
$($(\'.accordion-steps .image-wrapper .image\').get(targetImage)).addClass(\'active\');
});
Html and Wordpress Code
<section class="steps accordion-steps">
<div class="row">
<?php
$posts_counter = 0;
$dataimg = \'\';
$open = 0;
$args = array(
\'post_type\' => \'servicesaccordion\',
\'orderby\' => \'id\',
\'order\' => \'DESC\',
\'post_status\' => \'publish\'
);
$myposts = new WP_Query( $args );
?>
<?php
if ($myposts->have_posts() ) {
echo \' <div class="small-12 medium-7 large-5 column steps-wrapper e-in">\';
$i = 0;
// Always start the list with a div.row
/* Start the Loop */
while ($myposts ->have_posts() ) {
$myposts ->the_post();
$i++;
$dataimg++;
$open++;
?>
<div>
<div class="heading-accordion <?php if($open == 1){echo \'open\';} ?> delay-<?php echo $i ?> change-image" data-image="<?php echo $dataimg ?>" data-id="<?php echo get_the_ID();?>">
<div class="top">
<div class="deco-wrapper">
<div class="inner-wrapper"></div>
</div>
<?php the_title();?>
</div>
<div class="bottom" <?php if($open == 1){echo \'style="display: block;"\';} ?>
<div class="inner-wrapper">
<p><?php the_content();?></p>
</div>
</div>
</div>
<?php
$images_html_array[] = get_the_ID();
} // end of the while() loop
wp_reset_postdata();
echo \'
</div>
\';
echo \'
<div class="small-12 medium-5 column">
<div class="image-wrapper e-in">
<div class="image active">
<!--Post Iamge Will Show Herre According To The Posts-->
<img class="lazy" data-src="https://via.placeholder.com/639x504" alt="" />
</div>
<div class="image">
<!--Post Iamge Will Show Herre According To The Posts-->
<img class="lazy" data-src="https://via.placeholder.com/639x510" alt="" />
</div>
</div>
</div>
\';
</div>
</div>
</section>
SO网友:Antti Koskinen
我脑海中浮现出两个可能的解决方案概念。
1） 只需再次运行自定义循环（我的意思是键入、查询），这次只使用the_post_thumbnail.
<?php if ($myposts->have_posts() ) : ?>
<div class="image-wrapper e-in">
<?php while ($myposts ->have_posts() ) : $myposts ->the_post(); ?>
<div class="image ">
<!--Post Iamge Will Show Herre According To The Posts-->
<img class="lazy" data-src="<?php the_post_thumbnail_url(); ?>" alt="" />
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<?php endif; ?>
2）推送
get_the_post_thumbnail\'在执行自定义循环时，将s转换为助手数组。自定义循环完成后，执行
foreach 让助手数组在循环外回显缩略图html。
第一
$myposts = new WP_Query( $args );
images_html_array = array();
然后在回路内部
images_html_array[] = get_the_post_thumbnail_url();
那么
<div class="image-wrapper e-in">
<?php foreach( $images_html_array as $img_url ) : ?>
<div class="image ">
<!--Post Iamge Will Show Herre According To The Posts-->
<img class="lazy" data-src="<?php echo esc_url( $img_url ); ?>" alt="" />
</div>
<?php endforeach; ?>
</div>
也许吧？
这些只是粗略的代码示例，我还没有测试它们。
