Содержимое Jquery fancybox отображает содержимое другого div

Question

Jquery code

$("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>

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

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

при щелчке содержимого 4 div отображается содержимое 1 div, но должно отображаться содержимое 4 div

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

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
            });
        }
    );