Question

我想制作一个按钮，如果＆＃34;＆＃34;循环将从高级自定义字段插件中展开/显示更多图像。问题是，当页面上的帖子多于一个时，它不起作用，因为所有帖子中都有相同的按钮，并且所有图像都具有相同的类。有没有办法制作一个只能在它的帖子中使用的独特按钮？

<?php if (have_posts()) :   while (have_posts()) : the_post(); ?>

<?php the_content();    if (get_field('project_detail')) {
 the_field('project_detail');
 } ?>

<img src="<?php echo the_field('visible_image_1'); ?>" /> 

<button type="button">Show more</button> 

<script> 
$("button").click(function(){ $(".more").slideToggle(500); });
</script> 

<div class="more"> 
 <img src="<?php echo the_field('hidden_image_1'); ?>" /> 
 <img src="<?php echo the_field('hidden_image_2'); ?>" /> 
</div>  

<?php endwhile;
 else :
  echo '<p>No content found</p>';   endif;

get_footer();   ?>

CSS

.more { display：none; }

Answer 1

尝试这样的事情：

<?php
if (have_posts()) :   while (have_posts()) : the_post(); ?>

<?php the_content();    if (get_field('project_detail')) {
 the_field('project_detail');
 } ?>

<img src="<?php echo the_field('visible_image_1'); ?>" /> 

<button type="button" id="button<?php echo get_the_ID()?>">Show more</button> 

<script> 
$("#button<?php echo get_the_ID()?>").click(function(){ $(".more<?php echo get_the_ID()?>").slideToggle(500); });
</script> 

<div class="more<?php echo get_the_ID()?>"> 
 <img src="<?php echo the_field('hidden_image_1'); ?>" /> 
 <img src="<?php echo the_field('hidden_image_2'); ?>" /> 
</div>  

<?php endwhile;
 else :
  echo '<p>No content found</p>';   endif;

get_footer();   ?>

我们正在使用一个变量，它将被添加到每个按钮ID中，因此它们将是button1，button2等。让我知道这是否有效：）

添加每个帖子中唯一的按钮

1 个答案: