Замените один div на другой div, используя динамически созданный контент.

Question

Итак, у меня есть скрипт php, который запрашивает базу данных, и создает несколько элементов, отображающих аббревиатуру красной команды и аббревиатуру синей команды (как и график полоса вверху nfl.com). Я пытаюсь выполнить следующее:

При наведении мыши на элемент игры (класс = игра), замените слой 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

Как насчет того, чтобы сделать два divs детей игрового класса?

<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();  
}); 

(который также будет работать без $ управления/$ Control2 идентификаторами)

См http://jsfiddle.net/y3wLsz35/2/ для рабочего примера