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，然后将click事件应用于“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>

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

1 个答案: