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 div内容显示1 div内容的内容但应显示4 div内容的内容

如何克服这个问题

1 个答案:

答案 0 :(得分：1)

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>

修改

在你的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 }); } );

Jquery fancybox内联内容显示不同div的内容

1 个答案: