jQuery를 사용하여 wp_query 루프에있는 숨겨진 텍스트를 토글합니다.

Question

그래, 선택하면 이미지 아래에 그림의 정보가 많이 표시되는 5 개의 이미지가 있습니다. 이미지 및 텍스트는 사용자 정의 연락처 유형으로 저장됩니다. 이제 사용자 지정 콘텐츠 형식의 첫 번째 게시물 인 마지막 이미지로 작업하게되었습니다. 나는 자신의 jQuery를 작성하는 것에 익숙하지 않으므로 각각의 루프에 대해 어떤 종류가 필요한지 확실하지 않습니까? 모든 사람들이 여기에 포함 DIV 클래스는 또한 자신의 ID이 스크립트는 먼저 텍스트를 숨 깁니다

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

주어진다

<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(); ?> 

다른 있도록

다음은 이미지 클래스는 ID가 부여됩니다.

<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> 

아이디어를주십시오. 의 여기

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

과 :

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> 

에 클릭 이벤트를 적용 나을 거라고는 설명이다 클릭 이벤트

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