Question

当用户将鼠标悬停在表格行上时，要触发预览事件，只有它不以任何方式作出反应。我认为问题是表行是通过PHP生成的。

HTML＆amp; PHP

<table>
<thead>
    <tr>
        <th width="200">User</th>
        <th width="900">Description</th>
    </tr>
</thead>
<tbody>
    <?php
    require_once './Classes/MainController.php';
    $mc = MainController::getInstance();
    $threads = $mc->getAllThreads();
    foreach ($threads as $thread) {
        ?>
        <tr id='thread_video_preview'>
            <td><?php print $thread->original_poster; ?></td>
            <td><?php print $thread->description; ?></td>
            <td id='see_thread_video_url' class="hide"><?php print $thread->url; ?></td>
        </tr>
    <?php } ?>
  <script type="text/javascript" src="./Javascript/MainFunctions.js"> HoverPreview();        
  </script>
  </tbody>
  </table>

Jquery的

 function HoverPreview() {
$('tr#thread_video_preview').hover(function() {
    var url = $(this).$('#see_thread_video_url').html();
    $('#dynamicPreview').html('<iframe width="320" height="240" src="//www.youtube.com/embed/' + url + '?autoplay=1" frameborder="0""></iframe>')
});
}

Answer 1

这里有几个问题。首先，id属性应该是唯一的。如果要对元素进行分组，请使用类。其次，script标记的位置可能会导致问题。您应该将其放在head或</body>之前。最后，当您设置src标记的script属性时，您无法在其中放置任何代码。您需要一个单独的脚本标记。考虑到所有这一切，试试这个：

<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="./Javascript/MainFunctions.js"></script>
    <script type="text/javacript">
        $(function() {
            $('tr.thread_video_preview').hover(function() {
                var url = $(this).find('.see_thread_video_url').html();
                $('#dynamicPreview').html('<iframe width="320" height="240" src="//www.youtube.com/embed/' + url + '?autoplay=1" frameborder="0""></iframe>')
            });
        });
    </script>
</head>

身体：

<?php
    require_once './Classes/MainController.php';
    $mc = MainController::getInstance();
    $threads = $mc->getAllThreads();
    foreach ($threads as $thread) { ?>
        <tr class='thread_video_preview'>
            <td><?php print $thread->original_poster; ?></td>
            <td><?php print $thread->description; ?></td>
            <td class='see_thread_video_url' class="hide"><?php print $thread->url; ?></td>
        </tr>
    <?php } 
?>

Answer 2

更改此

    <tr id='thread_video_preview'>

致：

    <tr class='thread_video_preview'>

在jquery事件中使用

$(".thread_video_preview").

我认为在td而不是tr中使用属性或事件监听器是一种好习惯

如何设置表行来触发jQuery悬停事件

2 个答案: