使用 jQuery 切换 wp_query 循环中的隐藏文本

Question

好的，所以我有 5 张图片，当被选中时，它会在其下方的图片上显示大量信息。图像和文本存储在自定义联系人类型中。现在我让它处理最后一张图片，这是自定义内容类型中的第一篇文章。我是编写自己的 jQuery 的新手，所以不确定每个循环是否需要某种类型的东西？

这里的图像类被赋予了一个ID，所以每个人都是不同的

<a href="#" class="tutorlink-<?php the_id(); ?>"><img src="<?php echo $TutorImageURL[0]; ?>" alt="<?php echo get_post_meta($att, '_wp_attachment_image_alt', true); ?>" /></a>              
<?php endwhile; ?>
<div class="tutor-block">
<img src="<?php bloginfo('template_directory'); ?>/images/click.png" alt="tutors"/>
</div>

<div class="tutor-description">
<?php // The Loop
 while ( $tutors->have_posts() ) : $tutors->the_post(); ?>

这里包含的 div 类也被赋予了自己的 id

<div class="tutor-description-inner-<?php the_id(); ?>">
  <?php the_content(); ?>
</div>

此脚本首先隐藏文本。

<script>
var id = <?php echo $theID; ?>;
$('.tutor-description-inner-'+id+'').hide();
</script>

这是我目前编写的脚本，用于切换最后一张图片的文本。

<script>                  
 $(document).ready(function() {
   $('.tutorlink-'+id+'').click(function() {
     $('.tutor-description-inner-'+id+'').toggle('slow');   
  return false;
    });
});
</script>

请出主意？

Answer 1

最好在 id 属性中使用 id，然后将点击事件应用到“tutorlink”类

<a href="#" class="tutorlink" id="<?php the_id(); ?>"><img src="<?php echo $TutorImageURL[0]; ?>" alt="<?php echo get_post_meta($att, '_wp_attachment_image_alt', true); ?>" /></a>

这里是描述：

<div class="tutor-description-inner" id="tutor-description-inner-<?php the_id(); ?>">
  <?php the_content(); ?>
</div>

这是点击事件

 <script>                  
     $(document).ready(function() {
       $('.tutorlink').click(function() {
         $('.tutor-description-inner').hide('fast', function() {
            $('#tutor-description-inner-'+this.id+'').toggle('slow');
         });   
      return false;
        });
    });
    </script>