Question

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script src="<?php $this->baseUrl()?>/public/js/jQuery.bubbletip-1.0.6.js" type="text/javascript"></script>
<link href="<?php $this->baseUrl()?>/public/js/bubbletip/bubbletip.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
    for(i=1;i<12;i++){
    $('#a'+i).bubbletip($('#tip'+i), { deltaDirection: 'right' });
    }
});
</script>

标题部分中的

代码

   <?php 
    foreach($this->nominations as $nomination)
            {
        for($i=1;$i<12;$i++){
        if($nomination['award'.$i]!=""){?>
        <div id="tip<?php echo $i?>" style="display:none;">
            <div class="star"><strong><?php echo $nomination['award'.$i];?></strong></div>
            <div><strong>Project: </strong><?php echo $nomination['project'.$i]?></div>
        </div>
     <?php }}
for($i=1;$i<12;$i++){
                    if($nomination['award'.$i]!=""){
                echo "<span id='a$i'>";
                echo "<img src='/public/assets/images/icons/star.png'/>";
                echo "</span>"; 
                }}

}?>

正文部分中的代码

我的问题是当我的鼠标悬停在foreach的第一次迭代的星星上时，一切都运行良好但是从第二次迭代起它没有工作我发现问题是id a，提示因为它们总是变成a1， a2 ..和tip1，tip2 ......是否有任何解决方案

Answer 1

这是因为你的forach循环的每次迭代都会从a1 t a12创建相同id的元素你需要在id的名称中添加另一个级别。尝试使用以下

<?php
$count=0;
    foreach($this->nominations as $nomination)
            {
            $count++;
        for($i=1;$i<12;$i++){
        if($nomination['award'.$i]!=""){?>
        <div id="tip<?php echo $i?>_<?php echo $count?>" style="display:none;">
            <div class="star"><strong><?php echo $nomination['award'.$i];?></strong></div>
            <div><strong>Project: </strong><?php echo $nomination['project'.$i]?></div>
        </div>
     <?php }}
for($i=1;$i<12;$i++){
                    if($nomination['award'.$i]!=""){
                echo "<span id='a$i_$count'>";
                echo "<img src='/public/assets/images/icons/star.png'/>";
                echo "</span>"; 
                }}

}
<input type="hidden" id="total_iteration" name="total_iteration" value="<?php echo $count?>"/>
?>

相应地更改javascript代码

<script type="text/javascript">
$(document).ready(function() {

var total=$('#total_iteration').val();
var t=0;
 for(t=1;t<total;t++)
 {

    for(i=1;i<12;i++){
    $('#a'+i+'_t').bubbletip($('#tip'+i+'_'+t), { deltaDirection: 'right' });
    }

    }
});
</script>

经过上面的代码删除之后，代码应该以你想要的方式运行我还没有测试过，但我想主要的问题是每个foreach迭代中重复id的元素

带有动态数据的气泡工具提示

1 个答案: