的Jquery的fancybox联内容显示不同的div的内容
问题描述:
jQuery代码的Jquery的fancybox联内容显示不同的div的内容
$("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格的内容?接下来,如果我点击1它显示2格的内容?
的content is
1 div content
2 div content
3 div content
4 div content
的onclick 4格内容显示1个格内容的内容,但应该显示4格内容的内容
如何克服这个问题
答
创建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
});
}
);
你的意思是你想分页花哨的盒子? – Shaheer 2012-02-24 05:48:00
都能跟得上不...分页内容显示不同的div – Ghostman 2012-02-24 05:48:48
的,那么你将需要绑定与每个锚看中箱事件独立 – Shaheer 2012-02-24 05:53:11