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

Question

所以我有一个 php 脚本，它查询数据库，并创建一些显示红队缩写和蓝队缩写的元素（很像顶部的日程安排条） nfl.com）。我正在尝试完成以下内容：

鼠标悬停在游戏元素 (class=game) 上时，将 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 children怎么样class？

<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 也可以工作）

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

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

Replace one div with another div using dynamically created content

php

jquery