PHP 中的 jQuery 工具提示“while”循环不工作

发布于 2024-12-18 18:39:03 字数 1245 浏览 1 评论 0原文

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

我正在使用 while 循环来创建表行。这是我的工具提示

的样子：

<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>

这按计划工作，它计算每个的总价格。我遇到的问题是，当我将鼠标悬停在上时，它总是显示相同的first 工具提示。

因此，每个仅显示 1 个工具提示，即创建的第一个工具提示。而不是每行都有一个独特的工具提示。 PHP 部分有效 - 创建了独特的。我正在使用这段代码（它是默认的，我不太了解 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>

原文

I want to display tool-tips on my website, and I'm using this code: http://flowplayer.org/tools/demos/tooltip/table.html

I'm using a while loop to create table rows <tr>. Here is how my tool-tip <div> looks like:

<td class="maandgem">€ <?= 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>

And this works as planned, it calculates the total price for each <tr>. The problem I'm having is that when I hover over the <td class=maandgem> it always shows the same first tool-tip.

So, each <TD> shows only 1 tool-tip, the first one created. Instead of an unique tool-tip for each row. The PHP part works - there are unique <TD>'s being created. I'm using this code (its the default, I don't understand jQuery much)

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

I'm also including this .js, and I have a basic style sheet for the tool-tip.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

放肆 2024-12-25 18:39:03

我猜这是因为你使用了一个 id 作为工具提示，并且 id 必须是唯一的，因此 jquery 只选择第一个。

尝试使用类属性，然后选择它。

回复收藏 0 原文

白首有我共你 2024-12-25 18:39:03

是的，如果使用类而不是 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>

Yes, If class will be used instead of ID then it will works on loop also.
I have tested it and working fine.

    <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>

回复收藏 0 原文

~没有更多了~