Jquery FancyBox содержание дисплейных рядного содержания различных DIV в

Question

Jquery код

$("a#inline").fancybox({ 
     'type' : 'inline', 
     'hideOnContentClick': true 
    }); 

Html код

<div class="top_wrap"> 
<div class="top_header">Testimonial</div> 
<div class="top_text"> 

<?php 
if($getClientTestimonial->num_rows()>0){ 
    //$result = $profile->row(); 
    foreach ($getClientTestimonial->result()as $row){ 
    $clientName= $row->testimonialClientName; 
    $clientTestiContent= $row->testimonialContent; 
    //$length =10; 
    $displaytype= substr($clientTestiContent,0,50); 
?> 

<strong><?php echo $clientName;?></strong> 

<a id="inline" href="#data"><?php print_r($displaytype) ;?></a><br> 
      <div style="display:none"><div class="data" id="data"><?php echo $clientTestiContent;?></div></div> 

<?php }}?> 

</div> 
</div> 

Проблема в том, что он отображает содержимое разных #data ... Что-то, как он показывает содержимое из 1,2,3,4 .... если я нажимаю на 4, он показывает содержимое 1 div? следующий, если я нажимаю на 1, он показывает содержимое 2 div?

content is 
1 div content 
2 div content 
3 div content 
4 div content 

OnClick 4 содержания сНа отображение содержимого контент 1 сОн но должны отображать содержимое контента 4 сНа

Как преодолеть эту проблему

Answer 1

создать 4 различные метки анкерных и дать их класс,

<a id="inline1" href="#data1" class='fancybox-anchor-tag'><?php print_r($displaytype) ;?></a><br> 
<div style="display:none"><div class="data" id="data1"><?php echo $clientTestiContent;?></div></div> 
<a id="inline2" href="#data2" class='fancybox-anchor-tag'><?php print_r($displaytype) ;?></a><br> 
<div style="display:none"><div class="data" id="data2"><?php echo $clientTestiContent;?></div></div> 
<a id="inline3" href="#data3" class='fancybox-anchor-tag'><?php print_r($displaytype) ;?></a><br> 
<div style="display:none"><div class="data" id="data3"><?php echo $clientTestiContent;?></div></div> 
<a id="inline4" href="#data4" class='fancybox-anchor-tag'><?php print_r($displaytype) ;?></a><br> 
<div style="display:none"><div class="data" id="data4"><?php echo $clientTestiContent;?></div></div> 

EDIT:

в коде PHP, сделайте следующее:

<?php 
if($getClientTestimonial->num_rows()>0){ 
$i = 1; 
    //$result = $profile->row(); 
    foreach ($getClientTestimonial->result()as $row){ 
    $clientName= $row->testimonialClientName; 
    $clientTestiContent= $row->testimonialContent; 
    //$length =10; 
    $displaytype= substr($clientTestiContent,0,50); 
?> 

<strong><?php echo $clientName;?></strong> 

<a id="inline<?php echo $i; ?>" href="#data<?php echo $i; ?>" class="fancybox-anchor-tag"><?php print_r($displaytype) ;?></a><br> 
      <div style="display:none"><div class="data" id="data<?php echo $i; ?>"><?php echo $clientTestiContent;?></div></div> 

<?php 
$i++; 
}}?> 

затем сделать это:

$('a.fancybox-anchor-tag') 
    .each(
     function (e) 
     {    
      $(this).fancybox({ 
       'type' : 'inline', 
       'hideOnContentClick': true 
      }); 
     } 
    );