jQuery Tooltip в PHP, цикл "while" не работает - PullRequest
Новая
       3

jQuery Tooltip в PHP, цикл "while" не работает

1 голос
/ 30 ноября 2011

Я хочу отобразить подсказки на своем веб-сайте, и я использую этот код: 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> всегда отображается один и тот же first tool-tip.

Итак, каждый <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>

Ответы [ 2 ]

1 голос
/ 30 ноября 2011

Я полагаю, это потому, что вы используете идентификатор для всплывающей подсказки, а идентификатор должен быть уникальным, поэтому jquery выбирает только первый.

Попробуйте вместо этого использовать атрибут класса и выберите его.

0 голосов
/ 02 июня 2014

Да, если вместо идентификатора будет использоваться класс, он также будет работать в цикле.Я проверил это и работает нормально. 

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