Question

我想在我的网站上显示工具提示，我正在使用此代码：http://flowplayer.org/tools/demos/tooltip/table.html

我正在使用while循环来创建表行<tr>。以下是我的工具提示<div>的样子：

<td class="maandgem">&euro; <?= round($monthavg, 2); ?></td>
<div id="tooltip" class="tooltip">
    Shipping: <?= $row['price_shipping']; ?><br />
    Price: <?= $row['price']; ?><br /><br />
    Total: <?php echo $row['price'] + $row['price_shipping'] + ($row['abo_price'] * $row['abo_time']); ?>
</div>

这按计划运行，它会计算每个<tr>的总价。我遇到的问题是，当我将鼠标悬停在<td class=maandgem>上时，它始终显示相同的第一个工具提示。

因此，每个<TD>只显示1个工具提示，第一个创建。而不是每行的唯一工具提示。 PHP部分有效 - 创建了唯一的<TD>。我正在使用这段代码（默认情况下，我不太了解jQuery）

$(document).ready(function() {
    $(".maandgem").tooltip({
        tip: '#tooltip',
        position: 'bottom left',
        delay: 0
    });
});

我也包括这个.js，我有一个工具提示的基本样式表。

<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

Answer 1

我想这是因为你在工具提示中使用了id，而id必须是唯一的，因此jquery只选择第一个。

尝试使用class-attribute，然后选择。

Answer 2

是的，如果将使用class而不是ID，那么它也将在循环中工作。我测试过它并且工作正常。

    <link rel="stylesheet" href="jquery-ui-1.10.4.custom.css">  
    <script src="jquery-1.10.2.min.js"></script>  
    <script src="jquery-ui-1.10.4.custom.js"></script>  

    <script> 
        $(function() {   
            $( ".show-option" ).tooltip({     
                show: 
                {       
                    effect: "slideDown",     
                    delay: 250      
                },

                position: 
                {       
                    my: "center top",        
                    at: "center"      
                } 
            });   
        });  
    </script>
</head>
<body>
    <h2 class="show-option" title="Testing Tooltip">ToolTip</h2>
</body>

PHP中的jQuery Tooltip“while”循环不起作用

2 个答案: