Question

所以我所拥有的是一个查询数据库的php脚本，并创建了许多元素，这些元素既显示红色团队缩写，又显示蓝色团队缩写（非常类似于nfl.com顶部的计划条）。我正在努力完成以下任务：

在游戏元素（class = game）的鼠标悬停时，将div图层替换为包含匹配日期和时间的div图层。

我遇到的麻烦是以某种方式将这两个项目放在jQuery中。我可以让jQuery知道它需要隐藏哪个项目，但不知道需要用什么项来替换它。

$db = get_database_connection();

$today = date("Y-m-d");

$sql='
SELECT game_date as date,
        game_time as time,
                stred.team_name AS redteam,
                stblue.team_name AS blueteam,
                stred.team_abbreviation as redteamabbrev,
                stblue.team_abbreviation as blueteamabbrev
FROM stats_tblGames
INNER JOIN stats_tblTeams AS stred ON stats_tblGames.fk_id_team_red = stred.id_team
INNER JOIN stats_tblTeams AS stblue ON stats_tblGames.fk_id_team_blue = stblue.id_team
ORDER BY date ASC
LIMIT 5
';

echo '<div class="switch">';

foreach ($db->query($sql) as $row) {

$date = $row['date'];

if($today > $date) {

    $time = date('g:i A T',($row['time']));
    $redteam = $row['redteamabbrev'];
    $blueteam = $row['blueteamabbrev'];

    $control = $date . $redteam;
    $control2 = $redteam . $date;

    # Convert date
    $format = date_format(new DateTime($date), 'D, M j');    

    echo "<div id='$control' class='game'>";

        echo '<strong class="red-team">' . $redteam . '</strong><br>';
        echo '<strong class="blue-team">' . $blueteam . '</strong>';

    echo '</div>';

    echo "<div id='$control2' class='game hide'>";

        echo '<strong>' . $format . '</strong><br>';
        echo '<strong>' . $time . '</strong>';

    echo '</div>';

    # Script to hide/show games on hover
}
}

echo '</div>';

echo '<p class="clearfix"></p>';

?>

<script type="text/javascript">

jQuery('.game').mouseover(function() {
    jQuery(this.id).hide();
    jQuery(this.id).closest(SHOWID).show();            
});

</script>

Answer 1

如何让这两个div成为游戏类的孩子？

<div class='game'>
    <div id='$control'></div>
    <div id='$control2' class='hide'></div>
</div>

应该允许你使用像

这样的东西

jQuery('.game').mouseenter(function() {
    $(this).children().toggle();    
});

jQuery('.game').mouseleave(function() {
    $(this).children().toggle();    
});

（在没有$ control / $ control2 id＆＃39; s的情况下也能正常工作）

有关工作示例，请参阅http://jsfiddle.net/y3wLsz35/2/

使用动态创建的内容将一个div替换为另一个div

1 个答案: